css 垂直居中多种情况最全总结

最新推荐文章于 2023-09-30 13:11:25 发布

idiot22

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量89

点赞数

分类专栏： css 文章标签：前端布局 css 垂直居中

本文链接：https://blog.csdn.net/weixin_41904931/article/details/96599233

版权

4 篇文章 0 订阅

订阅专栏

元素自身要实现垂直居中

position:absolute;
top:0px;
bottom: 0px;
left:0px;
right:0px;
margin:auto;
background: #333;
width:px2rem(48);
height: px2rem(48);

居中

text-align:center //父级元素

居中

margin:auto  //要居中的元素

居中

table{
   margin:auto
}

<table>
	<tbody>
		<tr><td>
			<ul>
				<li>你好啊哈哈哈</li>
				<li>你好啊哈哈哈</li>
				<li>你好啊哈哈哈</li>
			</ul>
		</td></tr>
	</tbody>
</table>

.container ul{
   display:inline;
}
.container{
   text-aligin:center
}

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中
无需添加格外元素实现

//需要居中的元素
position:absolute;
left:50%;
transform:translateX(-50%)

5.flex布局

//父元素
.wrapper{
	display:flex;
	justify-content:center;
}

1.父元素高度确定的单行文本

line-height:父元素高度

2.父元素高度确定的多行文本
用table包裹文本，table自带vertical-align属性

table{
	height:父元素高;  //垂直
	margin:auto  //水平
}

3.内联块状元素垂直居中
直接用vertical-align:middle
4.flex布局

div{
	display:flex;
	justify-content: center; /* 水平居中 */
	align-items: center;     /* 垂直居中 */
}

关注