CSS垂直居中和水平居中

前言

总括： CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇百怪了。

原文地址：CSS居中小谈
知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书）
博主博客地址：Damonare的个人博客

人生用物，各有天限；夏涝太多，必有秋旱。

正文

内联元素居中方案

水平居中设置：

行内元素设置 text-align:center；
Flex布局设置display:flex;justify-content:center;(灵活运用)

垂直居中设置：

父元素高度确定的单行文本（内联元素）设置 height = line-height；
父元素高度确定的多行文本（内联元素） a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle；

块级元素居中方案

水平居中设置：
定宽块状元素设置左右 margin 值为 auto；
不定宽块状元素 a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto； b:给该元素设置 display:inine 方法； c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

1.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
```
.box{
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}
```
- 2.利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

.box{position: absolute;或fixedtop:0;right:0;bottom:0;left:0;margin: auto;
}

3.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

HTML代码：

<div class="box"><span>多行文字，此处居中设置</span>
</div>

CSS代码：

.box{display:table-cell;vertical-align:middle;text-align:center;width:100px;height:120px;background:purple;
}
.box span{display: inline-block;vertical-align: middle;
}

4.使用css3的新属性transform:translate(x,y)属性;

.box{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);
}

5.最高大上的一种，使用before，after伪元素;

HTML代码：

<div class='box'><div class='content'>垂直居中</div>
</div>

CSS代码：

.box{position:fixed;display:block;background:rgba(0,0,0,.5);
}
.box:before{content:'';display:inline-block;vertical-align:middle;height:100%;
}
.box:after{content:'';display:inline-block;vertical-align:middle;height:100%;
}
.box .content{width:60px;height:60px;line-height:60px;color:red;
}

6.Flex布局;

.box{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -moz-flex;display: -ms-flexbox;display: flex;水平居中-webkit-box-align: center;-moz-box-align: center;-ms-flex-pack:center;-webkit-justify-content: center;-moz-justify-content: center;justify-content: center;垂直居中-webkit-box-pack: center;-moz-box-pack: center;-ms-flex-align:center;-webkit-align-items: center;-moz-align-items: center;align-items: center;
}

结语

博主暂时掌握了这些居中方法，读者如果还有好方法或是觉得那个地方不对，欢迎评论，不吝感谢。

CSS垂直居中和水平居中相关推荐

CSS 垂直居中、水平居中及流失布局宽高自适应
CSS 垂直居中.水平居中及流失布局宽高自适应,在工作中,经常遇到某个元素如何居中,因此介绍一种简单的居中方式.同时,也经常遇到,上到下布局,当顶部动态变化时,及高度不固定,但是底部如何动态铺满父元素 ...
css垂直居中和水平居中方法总结
CSS垂直居中总结文档转载网络并做整合 ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中利用margin: 0 ...
高度不定垂直居中_经典：CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
java布局垂直居中_CSS水平居中和垂直居中解决方案（转）
一.CSS 居中 - 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
前端中全部盒子靠左对齐_图文详解ul中li内容垂直居中和水平居中的方法
在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中.感兴趣的朋友继续往下看吧. ...
CSS垂直居中的七个方法
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题,但一直 ...
HTML 水平居中垂直居中垂直水平居中的几种实现方式
文章目录水平居中垂直居中垂直水平居中方式1:绝对定位方式二定位+负margin 方式3:使用translate实现平移方式4:通过设置bottom top left right marg ...

CSS垂直居中和水平居中

前言

正文

内联元素居中方案

块级元素居中方案

结语

CSS垂直居中和水平居中相关推荐

最新文章

热门文章