居中的css:完全指南(翻译)

Integ 发布于2019-08-30 12:54 / 2230人阅读

摘要：水平水平居中有行内元素和块元素，行内元素有文字图片链接等块元素主要是等元素。块元素对于一个块元素，可以设置其和自动，就像这样在线查看无论块元素的宽度是否已知，都可以实现水平居中。

这里主要参考的是CHRIS COYIER写的一篇的文章(点击查看)，主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo，可以在线查看效果。

1 水平

水平居中有行内元素和块元素，行内元素有文字、图片、链接等；块元素主要是div、p等block元素。

1.1 行内元素

对于行内元素可以使用如下实现水平居中(在线查看demo)：

.blocklist1_1 {    
    text-align: center;
}

这种方法对于inline，inline-block，inline-table等都有效。

1.2 块元素

对于一个块元素，可以设置其margin-left和margin-right自动，就像这样(在线查看demo)：

.blocklist1_2 .div1 {    
    margin: 0px auto;
}

无论块元素的宽度是否已知，都可以实现水平居中。

1.3 多个块元素

如果有多个块元素需要水平居中时，有两种办法可以实现。一种是借助inline-block，另一种是借助flex。对于第一种方法可以使用如下方式(在线查看demo)，设置块元素display:inline-block,其父元素水平居中：

..blocklist1_3 .div1 {    
    text-align: center;    
}    
.blocklist1_3 .div1 div {    
    display: inline-block;    
}

用flex的话需要给块的父元素添加如下样式(在线查看demo)：

.blocklist1_3 .div2 {    
    display: flex;    
    justify-content: center;    
}

2 垂直

垂直居中也分有行内元素和块元素，不过相比水平居中，垂直居中这里需要讨论的情况有点多，下面我们一一分析。

2.1 行内元素 2.1.1 单行

对于单行的行内元素，我们只需要设置其padding-top和padding-bottom值相等即可(在线查看demo):

.blocklist2_1_1 .div1 {    
    padding-top: 20px;    
    padding-bottom: 20px;    
}

如果我们不能设置padding的话，而行内元素的高度(height=50px)已知时，可以设置line-height=height,实现元素的垂直居中(在线查看demo)：

.blocklist2_1_1 .div2 {    
    line-height: 50px;    
    height: 50px;    
}

2.1.2 多行

对于多行元素我们有四种方式可以实现垂直居中：

a.可以像上面那样通过设置padding-top和padding-bottom的值相等来实现垂直居中(demo-1)：

.blocklist2_1_2 .div1 {   
    padding: 20px 0px;  
}

b.可以借助vertical-align属性来实现垂直居中(demo-2)：

.blocklist2_1_2 .div2 {   
    display: table;    
}    
.blocklist2_1_2 .div2>div {    
    display: table-cell;    
    vertical-align: middle;    
}

c.可以借助flex技术来实现垂直居中，只需添加如下样式(demo-3)：

.blocklist2_1_2 .div3 {    
    display: flex;    
    justify-content: center;   
    flex-direction: column;    
    height: 400px;   
}

d.将一个全高度的伪元素放置在容器内，然后设置文本垂直对齐(demo-4)：

.blocklist2_1_2 .div4 {    
    position:relative;    
}    
.blocklist2_1_2 .div4::before {    
    content: " ";    
    display: inline-block;    
    height: 100%;    
    width: 1%;    
    vertical-align: middle;    
}    
.blocklist2_1_2 .div4>div {    
    display: inline-block;    
    vertical-align: middle;    
}

2.2 块元素 2.2.1 块元素高度已知

在网页布局中有的时候我们知道元素的高度，有的时候我们不知道。对于已知高度的块元素可以这样设置来实现垂直居中(demo)：

.blocklist2_2_1 .div {    
    position: relative;    
}   
.blocklist2_2_1 .div div {    
    position: absoulte;
    top: 50%;    
    height: 100px;
    margin-top: -70px; //这里70px是height*1/2 + padding    
    padding: 20px;    
}

2.2.2 块元素高度未知

有时候我们是不知道块元素的高度的，这时候可以使用transform来实现(demo):

.blocklist2_2_2 .div {    
    position: relative;    
}    
.blocklist2_2_2 .div div {    
    transform: translateY(-50%);    
    top: 50%;    
    position: absoulte;    
}

2.2.3 利用flex实现

除了以上两种办法，还可以使用flex实现(demo):

.blocklist2_2_3 .div {    
    display: flex;    
    flex-direction: column;    
    justify-content: center;    
}

3 水平垂直

有的时候我们不仅希望水平居中还希望垂直居中，可以结合以上提到的例子进行组合实现，主要分为以下三个方面：

3.1 元素高度、宽度已知

当元素高度和宽度已知时，可以将元素绝对定位，偏移中心50%，然后使用负的margin值实现，如下(demo):

.blocklist3_1 .div {    
    position: relative;    
}    
.blocklist3_1 .div div {    
    position: absoulte;
    top: 50%;    
    left: 50%;    
    margin: -120px 0px 0px -220px;    //height一半，width一半，另外加上padding值
    height: 200px;    
    width: 400px;    
    padding: 20px;    
}

3.2 元素高度、宽度未知

如果元素的高度和宽度未知呢，我们可以使用变换属性，在两个方向赋予50%的负值，如下(demo):

.blocklist3_2 .div {   
    position: relative;    
}    
.blocklist3_2 .div div {    
    position: absolute;     
    top: 50%;    
    left: 50%;    
    transform: translate(-50%, -50%);    
}

3.3 利用flexbox实现

用flex实现时需要使用两个中心属性(demo)：

.blocklist3_3 .div {     
    display: flex;    
    justify-content: center;    
    align-items: center;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115152.html

居中的css:完全指南(翻译)

摘要：水平水平居中有行内元素和块元素，行内元素有文字图片链接等块元素主要是等元素。块元素对于一个块元素，可以设置其和自动，就像这样在线查看无论块元素的宽度是否已知，都可以实现水平居中。这里主要参考的是CHRIS COYIER写的一篇的文章(点击查看)，主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo，可以在线查看效果。 1 水平水平居中有行内元素和块元素，行内元素...

Xufc 2019-08-01 15:09 评论0 收藏0
CSS居中完全指南

摘要：原载于，本文着重提取文中的方法，不完全翻译。人们经常抱怨在中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。原载于CSS-Trick，本文着重提取文中的方法，不完全翻译。如有需要，直接原文查看。人们经常抱怨在CSS中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个‘...

qujian 2019-08-30 12:47 评论0 收藏0
CSS 居中完全指南

摘要：在文本前面插入一个高度为百分百的伪元素，让文本与其垂直对齐。块级元素或者使用垂直水平居中或者使用翻译自 https://css-tricks.com/centering-css-complete-guide/ 预先给出这样的样式 .container { width: 100%; height: 200px; background-color: azur...

hqman 2019-08-30 13:03 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0