利用CSS实现div水平垂直居中

来源：懂视网责编：小采时间：2020-11-27 18:52:14

利用CSS实现div水平垂直居中

利用CSS实现div水平垂直居中:实现居中的方案有很多，这里介绍下纯CSS使用absolute配合margin的方案。1. p宽高固定width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px; marg

推荐度：

点击下载本文 文档为doc格式

导读利用CSS实现div水平垂直居中:实现居中的方案有很多，这里介绍下纯CSS使用absolute配合margin的方案。1. p宽高固定width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px; marg

实现居中的方案有很多，这里介绍下纯CSS使用absolute配合margin的方案。

1. p宽高固定

width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;

margin-top为-(height / 2)，margin-left为-(width / 2)。当然也可以不用margin，即top为calc(100% - height) / 2，left为calc(100% - width) / 2，但是建议可以不用calc()就不要用。

2. p宽高不固定

width: 50%;
height: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

注意，这适用于宽高需指定的情况，比如使用百分比或者用js动态修改，不然可能被当成100%处理。

也可以不用margin用translate()，如下：

width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

3. CSS3不定宽高水平垂直居中

justify-content: center; /* 子元素水平居中 */
align-items: center; /* 子元素垂直居中 */
display: -webkit-flex;

在父级元素上添加，即可实现子元素水平垂直居中。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:0731-84117792 E-MAIL:11247931@qq.com

利用CSS实现div水平垂直居中

推荐度：

点击下载本文 文档为doc格式

标签：水平居中 css 垂直居中

热门焦点

利用CSS实现div水平垂直居中

利用CSS实现div水平垂直居中

利用CSS实现div水平垂直居中

最新推荐

猜你喜欢

热门推荐