horizontal center and vertical middle in CSS

ConardLi 发布于2019-08-21 10:54 / 2619人阅读

摘要：这个实现的技巧在于，我们给目标元素的四个方位都设置了相对父元素为的距离，但是没有最后一行就像四个方向都有一个同样大小的力在拉扯着你，这时候产生的效果是呆在原地不动这时候是左边的效果。

写在前面的话：
1: 为了方便起见，接下来我都会把想要居中的元素，不管是一行text，还是一个div，都叫做‘目标元素’，把包含这个目标元素的叫做‘父元素’。（额。。。。这两个名字如此不对称，我也是醉了。）

2: 我会给一个元素设置一个同名的class和id，class用了写一些实际上跟居中没有关系的css，只是为了好看；id呢用来写跟居中有关的css，免得混淆了。

Case 1: 最简单的单行的行内元素（inline element）
HTML Code:


     aaaaa

CSS Code:

.child {
    height: 100px;
    width: 100px;
    background-color: #F7F00E;
}

#child {
    line-height: 100px;
    text-align: center;
}

垂直居中：只需要给父元素（＃child）设置‘等值’的height和line-height.
水平居中：当然就是text-align: center 就行了

Case 2: 一个div在另一个div里面居中
HTML code:


     Apple

CSS code:

#child {
    line-height: 100px;
    text-align: center;
}

case 2和case 1一样，对于垂直居中来说，只需要设置等值的line-height和height就可以了。达到的效果是：
------->

Case 3: 多个div元素在父div元素中垂直水平居中
HTML code:


     Apple
     Orange

CSS code:

#child {
    line-height: 100px;
    text-align: center;
}

这时候，我们往＃child里面添加了一个div元素，如果我们保持我们之前的＃child的css代码不变，这时候呈现的效果是：

因为我们给父元素＃child设置了100px的line-height,而line-height是可以继承的，所以它里面的每一个div元素都通过继承拥有了100px的line-height。这个时候还想依赖于line-height来实现垂直居中，显然就不行了。对于这种情况，有多种解决方案：
1: table-cell ＋vertical-align
HTML code:


     Apple
     Orange

CSS code:

#child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

呈现的效果：

2: position relative + absolute ＋ margin
HTML code:


 
     Apple
     Orange

CSS code:

.parent {
    height: 90px;
    width: 90px;
    border: 1px solid black;
}
.child {
    height: 60px;
    width: 60px;
    background-color: #F7F00E;
}
#parent {
    position: relative;
}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;//修正中心点
}

先来看看效果的演进。从第一个图到第二个图是我们添加了＃parend和＃child里面的css的效果，但是这时候不包括＃child里面的最后一句 margin: -30px 0 0 -30px;。因为我们设置了top和left分别相对父元素间隔50%的距离，但是这个位移是以子元素也就是＃child的左上角为原点的，所以如果我们想要达到子元素（＃child）和父元素（＃parent）的中心重合的话，还得再次向左和向上分别移动宽度和高度的一半的距离，也就是＃child里面最后一句代码做的事情。那30px，其实就是＃child一半的宽度和高度。
----> ---->

3: position relative + absolute + margin auto
HTML code:

 
     Apple
     Orange

CSS code:

.parent {
    height: 90px;
    width: 90px;
    border: 1px solid black;
}
.child {
    height: 60px;
    width: 60px;
    background-color: #F7F00E;
}
#parent {
    position: relative;
   }
#child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

这个实现的技巧在于，我们给目标元素＃child的四个方位都设置了相对父元素为0的距离，但是没有最后一行 margin: auto;就像四个方向都有一个同样大小的力在拉扯着你，这时候产生的效果是呆在原地不动,这时候是左边的效果。但是，当我们添加了最后一行代码：margin: auto;我们的目标元素就会跑到父元素的正中间。margin: 0 auto; 常常被我们用来设置水平位置的居中，所以当我们给它四个方向都设置auto的时候，它就只能在父元素的正中间了。
--->

云服务器 GPU云服务器 css-in-js vertical Middle horizontal

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

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

CSS居中完全指南——构建CSS居中决策树

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

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

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

AlienZHOU 2019-08-30 15:53 评论0 收藏0
16种水平居中垂直居中方法

摘要：原文链接水平居中若是行内元素给其父元素设置即可实现行内元素水平居中若是块级元素该元素设置即可若子元素包含属性为了让子元素水平居中则可让父元素宽度设置为并且配合作如下设置是中给属性新加的一个属性值它配合可以轻松实现水平居中原文链接水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin...

jerry 2019-08-30 15:54 评论0 收藏0
CSS那些事儿——居中布局

摘要：前言居中布局，是前端页面最常见的一种布局需求。下面将现今自己了解的居中布局方法作个小总结。水平居中行内元素在包含的父元素定义属性为。垂直水平居中对于这个问题，可以综合上述点进行实现。前言居中布局，是前端页面最常见的一种布局需求。刚开始学习前端时还是困扰了一段时间，后来看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面将现今自己了解的居...

JeOam 2019-08-29 13:05 评论0 收藏0
CSS进阶篇--div中的内容垂直居中的五种方法

摘要：二内边距法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用将内容垂直居中，比如这段代码的效果和法差不多。一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hi...

fjcgreat 2019-08-28 18:17 评论0 收藏0