css 居中

魏明发布于2019-08-29 12:50 / 3024人阅读

摘要：居中定义和用法简写属性在一个声明中设置所有外边距属性。上诉的第二种声明并不能实现垂直居中的效果，具体可以看标准声明或看下知乎的这篇文章。该方式需要居中元素的宽高确定。

css居中
1.margin:0 auto;
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

垂直外边距之所以设计为可以在垂直方向合并主要是方便文本的排版，即一段文本分行的时候上下两行直接的间距不会叠加。

简写的情况：

/*四个方向的外边距
都是10px*/
margin: 10px;
/上下的外边距都是10px，左右的外边距20px/
margin: 10px 20px;
/上的外边距都是10px，左右的外边距是5px，下外边距15px/
margin: 10px 5px 15px;
/四个值依次是上、右、下、左/
margin: 10px 5px 15px 20px;
/设为auto的计算方式/
margin: 0 auto; /常用的水平居中对齐方式/
margin: auto;
上述的auto的计算方式是父容器-子元素剩余部分浏览器自动计算，以上述的水平居中方式为例，左右的外边距等于父容器减去子容器剩余部分的宽度均匀分配给左右，从而实现居中对齐的效果。

上诉的第二种声明并不能实现垂直居中的效果，具体可以看w3c标准声明或看下知乎的这篇文章。

margin使用百分比单位计算的情况
/百分比是按照父容器的宽度来计算的，务必注意/
margin: 20%;
从上我们可以知道通过margin如何实现水平居中。

2.text-align:center;
1）绝对定位实现垂直居中

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

采用绝对定位加负外边距的方式，首先上，左偏移父容器的50%;然后再自身偏移自己宽高的50%，从而实现垂直水平居中。该方式需要居中元素的宽高确定。

2）绝对定位且居中元素不知宽高的情`
`position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;`

在这里使用CSS3的transform:translate(-50%,-50%);属性来实现元素自身的一个偏移

3）绝对定位+margin:auto;实现水平垂直居中

position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100px;
height:100px;
margin:auto;

转载别人的主要自己看

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

转载请注明本文地址：https://www.ucloud.cn/yun/112185.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
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0
css-元素居中

摘要：一水平居中行内元素水平居中使用属性可以实现在行内元素包括在块级父元素水平居中。使用负已知高度宽度使用使用使用三水平垂直居中公共结构块级元素垂直居中。本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。一、水平居中 1.行内元素水平居中使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Labradors 2019-08-02 16:01 评论0 收藏0