CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。
谈及HTML元素居中展示,涉及到水平居中和垂直居中,以及水平垂直居中。由于HTML文档流是水平方向的,所以水平方向上的布局控制比垂直方向要简单很多,居中也是如此。不过(水平)垂直居中还是有很多种写法,至少一只手是数不过来了,本文列出几种,并进行简单比较。
一、水平居中
使用CSS控制水平居中很简单:
-
块级元素 设置width,并设置margin auto
-
内联元素 父元素设置text-align center
HTML代码如下:
<div class="container">
<div class="content">
水平居中哦
</div>
</div>
1. 块级元素水平居中
.container {
height: 300px;
width: 300px;
border: 1px solid red;
}
.content {
width: 10rem;
border: 1px solid green;
margin: 0 auto;
}
效果:
2. 内联元素水平居中
.container {
height: 300px;
width: 300px;
border: 1px solid red;
text-align: center;
}
.content {
display: inline-block;
border: 1px solid green;
}
效果:
代码很简单,而且没什么兼容性问题,所以通常也