CSS块级盒子水平居中对齐(auto)

当我们缩小浏览器窗口的时候,会发现页面都是在浏览器居中位置现显示的。

外边距可以让块级盒子水平居中显示,但是必须满足两个条件:

  1. 盒子必须指定了宽度(width)
  2. 盒子左右的外边距都设置为auto

语法:

.header {
    width: 300px;
    margin: 0 auto;
}

宽度为300像素,上下外边距为0,左右外边距自动居中。

常见写法如下:

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

注意点

以上方法是让块级元素水平居中。如果要让行内元素或者行内块元素水平居中,只要给其父元素添加 text-align:center即可。

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信
通知:站点改版中,敬请期待