CSS元素水平垂直居中方案总结

最新推荐文章于 2024-04-29 17:54:08 发布

靠靠的博客

最新推荐文章于 2024-04-29 17:54:08 发布

阅读量587

点赞数

分类专栏： HTML/CSS/JavaScript

本文链接：https://blog.csdn.net/hahawhyha/article/details/52199230

版权

HTML/CSS/JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

【水平居中】

1、对于行内元素，将其包裹在display:block的父级元素中，为父级元素添加 text-align:center;

2、对于块状元素，左右外边距为auto即： margin:10px auto; 其中10px指的是上下外边距为10像素。

3、对于多个块状元素，将元素display设为inline-block，并且父元素的text-align设置为center

<body>

</body>

css:

.center{

display:inline-block;

}

body{

text-align:center

}

4、多个块状元素，使用flexbox布局

只需要把块状元素的父元素添加 display:flex; justify-content:center;

如下:

<body>

</body>

body{

display: flex;

justify-content: center;

}

【垂直居中】

1、行内元素，将height, line-height同时设置为父元素的高度

<a href="#">hello</a>

</div>

#container{

background: #222;

height:200px;

}

height:200px;

line-height:200px;

color:#fff;

}

2、多行的行内元素

组合使用display:table-cell vertical-align:middle来定义需要居中元素的父容器

<a href="#">hello，here are many words,more than one line...hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </a>

</div>

.container{

background:#ccc;

width:300px;

height:300px;

/*以下属性垂直居中*/

display: table-cell;

vertical-align:middle;

}

a{ color:#fff;}

3、已知高度的块状元素

使用top：50%;然后margin-top回退元素本身高度的一半

div{

width:100px;

height:100px;

background:#222;

}

.item{

top:50%;

margin-top: -50px;/*为元素本身100px的一半，这里是负值*/

position:absolute;

padding:0;

}

4、未知高度的块状元素

仍然先使用top:50%，但是这里高度未知，所以用css3的transform属性垂直移动

<div class="item">hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </div>

div{

width:100px;

background:#222;

color:#fff;

}

.item{

top:50%;

position:absolute;

transform:translateY(-50%);

}

【水平垂直居中】

1、已知高度宽度的元素

原理和上面涉及的一样，定位absolute，top和left为50%，然后margin-top和margin-left为元素本身高度一半，并且是负值

.div{

width:100px;

height:100px;

background:#222;

color:#fff;

}

.item{

position:absolute;

top:50%;

left:50%;

margin-top:-50px;

margin-left:-50px;

}

2、未知宽高度的元素

使用transform

div{

background:#222;

color:#fff;

}

.item{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%, -50%);

}

3、使用flex布局

</div>

.item{

background:#222;

color:#fff;

width:100px;

height:100px;

}

.parent{

display:flex;

justify-content:center;

align-items:center;

/*这里要设置高度来查看出垂直居中的效果*/

background:#aaa;

height:300px;

}

补充：

关于flex布局，弹性盒子布局。声明了display:flex;即变为伸缩容器，在伸缩容器内的所有子元素将自动变成伸缩项目flex items.常结合使用的属性有 dispaly:flex; flex-flow:row; 或者flex-flow:column;

思考：这里也可以利用flex布局来实现一列固定一列自适应的布局吧（详情见本blog另一篇博文）：

</div>

.parent{

width:800px;

border:1px solid #222;

dispaly:flex;

flex-flow:row;

}

.stable{

width:200px;

border:1px solid #ccc;

}

.change{

border:1px solid #ddd;

}

关于transform属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew。

示例写法：

transform:translate(20px);

transform:scaleY(3);

transform:rotateY(10deg);

等等，详情参考W3School
参考资料：
极客标签水平垂直解决方案

靠靠的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS元素水平垂直居中方案总结

【水平居中】1、对于行内元素，将其包裹在display:block的父级元素中，为父级元素添加 text-align:center;2、对于块状元素，左右外边距为auto即： margin:10px auto; 其中10px指的是上下外边距为10像素。3、对于多个块状元素，将元素display设为inline-block，并且父元素的text-align设置为centerdiv
复制链接

扫一扫