css2和css3水平居中和垂直居中

css3新增了一些属性，像flex，这是css3中很重要的改变，所以除了flex以外的垂直水平居中的技巧都是属于css2的。

- css2的水平居中技巧

将元素display为行内元素，再text-align:center;即可

或者将块级元素定义一个宽度，再margin: 0 auto;即可

- css3的水平居中技巧

将元素display设为flex，再通过justify-content: center; 实现居中。

- css2的垂直居中技巧

单行内容的垂直居中可以通过设置相同height值和line-height值来实现。

多行内容的垂直居中且高度可变可以通过设置上下相同的padding值来实现。

行级盒子：小图标和标题对齐设置vertical-align: middle。

绝对定位：top:50%; left:50%;的方法，需要已知块级的宽高

- css3的垂直居中技巧

将元素display设为flex，再通过align-items:center;来实现。

方法1： .div1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   <div class="div1"></div> 
方法2： .div2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  <div class="div2"></div> 
方法3： .div3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   <div class="div3"></div>

具体实现：将#main下的子盒子居中显示

<head>

<style>

#main {

width: 400px;

height: 400px;

border: 1px solid #c3c3c3;

display: flex;

justify-content: center;

align-items:center;

}

#main div {

width: 50px;

height: 50px;

}

</style>

</head>

<body>

</div>

</body>

</html>

结果：#main div 盒子水平垂直居中

用absolute实现水平垂直居中

#main {

width: 400px;

height: 400px;

position:absolute;

border: 1px solid #c3c3c3;

top:50%;

left:50%;

margin-left:-200px;

margin-top:-200px;

}

#main div {

position:absolute;

top:50%;

left:50%;

width: 50px;

height: 50px;

margin-left:-25px;

margin-top: -25px;

}

</style>

</head>

<body>

</div>

结果：

posted @ 2021-04-16 11:17 浣熊sky 阅读(257) 评论(0) 收藏举报

刷新页面返回顶部

浣熊sky

css2和css3水平居中和垂直居中

公告