使用CSS居中元素的一些方法

CSS有很多方法将网页中的元素水平和垂直进行居中的对齐方法

工具/原料

电脑

网页编辑器Hbuilder

方法/步骤

在我们编写网页的代码时候,有那么几种方法对网页的元素进行布局都需要居中对齐，现在我来介绍相关的一些方法

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中

我们可以使用 position: absolute; 属性来对齐元素

我们也可以使用 float 属性来对齐元素:

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding，之后文本水平对齐使用text-align:center，垂直对齐用line-height为行高

总结: 块级元素使用margin:auto居中文本使用text-align水平居中,line-height垂直居中

注意事项

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

上一篇：DIV垂直水平居中

下一篇：魔术长条气球教程（第17期）——树叶

推荐信息

欧尼酱

使用CSS居中元素的一些方法

怎样使用显微镜观察洋葱表皮细胞正确步骤

怎么使用CSS让图片水平垂直都居中？