水平居中

网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一详述。

水平居中

1.text-align: center; 对父元素设置text-align: center;子元素即可居中。但子元素是有限制的，只对图片，文字等行内元素有效。 如果子元素有一定宽度,可以设置子元素display:inline-block;

效果

2.margin: 0 auto; 元素本身设置 margin: 0 auto; 这种方法对能设置宽度的元素起作用.

效果

3.position:absolute;

这种方法也需要固定元素的宽度.

效果

4.flex

效果

垂直居中

1.一行文字垂直居中

效果

2.未知高度元素居中

第一种方法

第二种方法

效果

3.高度已知垂直居中

第一种方法

第二种方法

第三种方法

效果

上下左右居中

上下垂直居中,把上面的综合起来就可以啦

1.子元素宽和高不确定

第一种方法

第二种方法

2.子元素宽和高确定

第一种方法

第二种方法

第三种方法