CSS居中布局是常见的一个问题,是初级前端需要面对的问题之一。
在了解CSS如何实现居中布局之前,我们先来了解一些概念。
1、行内元素
①和其他元素都在同一行
②高,行高及外边距和内边距部分可以改变
③宽度只与内容有关
④行内元素只能容纳文本或者其他行内元素
⑤常用内联元素:a,img,input,lable,select,span,textarea,font
2、块级元素
①总是在新行上开始,占据一整行
②高度,行高以及外边距和内边距都可控制
③宽度始终与浏览器的宽度一样,与内容无关
④可以容纳行内元素和其他块级元素
⑤常用的块级元素:div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li
了解了行内元素和块级元素的区别后,我们再来看下居中的分类。
居中方式分为三种:水平居中,垂直居中,水平垂直居中。
1、水平居中
1.1、块级元素水平居中
利用text-align: center可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline),行内块(inline-block),行内表(inline-table),inline-flex元素水平居中都有效。
<style>
div{
text-align: center;
background-color:skyblue;
}
</style>
</head>
<body>
<div>
这里是块级元素
</div>
</body>
1.2、行内元素水平居中
通过把固定宽度的块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中。
1.3、多块级元素水平居中
利用inline-block
如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
2、垂直居中
2.1、单行行内元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。
2.2、多行元素垂直居中
利用表格布局
利用表布局的vertical-align: middle可以实现子元素的垂直居中 。
2.3、块级元素垂直居中
固定高度的块级元素
已知居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可实现垂直居中。
3、水平垂直居中
3.1、固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半,使元素水平垂直居中。
3.2、未知宽高元素水平垂直居中
利用2D变换,在水平和垂直方向都反向平移宽高的一半,从而使元素水平垂直居中。
3.3、利用flex布局
利用flex布局,其中justify-content用于设置或检索弹性盒子元素在主轴上方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式。