关键词：
DIV居中的几种方法
在开发过程中，很多需求需要我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。
1.text-align:center方式
代码：
|
1
2
3
4
5
|
<div class="center"> <span class="center_text"> 123 </span></div> |
.center text-align:center; center_text display:inline-block; width:500px
这种方式可以水平居中块级元素中的行内元素，如inline，inline-block；
但是如果用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种方法就会失效。只能让里面div的文字等内容居中，而div仍然是左对齐的。
还有一种情况，当内部的元素脱离了文档流，display:absolute的情况下，不管是否是块级元素，都会居中，但是这种居中不是基于内部div的内容的，而是内部div最左端，内部div的最左端在div的中间（前提外部div设置了position:relative/absolute/fixed）；
2.margin:0 auto方式
代码：
|
1
2
3
4
5
|
<div class="center"> <span class="center_text"> 我是块级元素，我是块级元素，我给自己设了display：block </span></div> |
|
1
2
3
4
|
center_text display:block; width:500px<br> margin：0 auto； |
这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。
3.脱离文档流的居中方式。
这种通常应用在自定义弹框当中，把背景层设置成透明灰色，内容居中显示在最前面。
代码：
|
1
2
3
4
|
<div class="mask"> <div class="content"><br> 我是要居中的板块 </div></div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.mask display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; filter: alpha(opacity=30); -ms-filter: "alpha(opacity=30)"; opacity: .3; z-index: 10000;.center display: block; position: fixed; _position: absolute; top: 50%; left: 50%; width: 666px; height:400px; margin-left: -333px; margin-top: -200px; z-index: 10001; box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0; background-color: #fff; |
效果：
这种居中方式，把内部div设置宽高之后，再设置top、left各为50%，设置完之后，这里是按照左端居中的，接着我们使用负边距的方式调整，将margin-top设置为负的高度的一半，margin-left设置为负的宽度的一半，就可以居中了。
这种方式还有一种居中方法就是设置margin：-（内部div高度的一半） auto；这用就不用设置left的值了。
4.display:table-cell
display:table-cell配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td，float、absolute等属性都会影响它的实现，不响应margin属性;
代码：
|
1
2
3
4
|
<div class="center"> <div class="center_text"> 1111111<br> </div></div> |
|
1
2
3
4
5
6
7
8
9
|
.center display: table; width: 100%;.center_text display: table-cell; text-align: center; vertical-align: middle; |
5.垂直居中
行内元素的垂直居中把height和line-height的值设置成一样的即可。
代码：
|
1
2
3
4
|
<div class="center"> <span class="center_text"> 我是要居中的内容<br> </span></div> |
|
1
2
3
|
center height：40px; line-heigth:40px;<br> |
这样内部的span标签就可以居中了。
6.使用css3的translate水平垂直居中元素
代码：
|
1
2
3
|
<div class="center"> <div class="center_text"> 我是要居中的内容<br> </div> <br></div> |
|
1
2
3
4
5
6
7
8
9
10
11
|
.center position: relative; height: 500px;.center_text position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 600px; |
这种方式将脱离文档流的元素，设置top：50%，left：50%，然后使用transform来向左向上便宜半个内元素的宽和高。
7.使用css3计算的方式居中元素calc
代码：
|
1
2
3
4
|
<div class="center"> <div class="center_text"> 我是要居中的内容<br> </div></div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.center position: relative; height: 300px; width: 1000px; border: 1px solid #ccc;.center_text position: absolute; top: calc(50% - 50px); left: calc(50% - 150px); width: 300px; height: 100px; border: 1px solid #000; |
效果：
这种方式同样是将脱离文档流的元素，然后使用计算的方式来设置top和left；
以上是几种居中的方式，前3种是比较常用的，只要了解原理，后几种都是这个原理的不同实现方式。
css实现垂直居中的几种方法(代码片段)
一、单行文本的居中1.文字水平居中1<divclass=‘box‘style="text-align:center;">helloworld</div>2.文本垂直水平居中1<divclass="box2"style="height:200px;line-height:100px;">文本垂直水平居中</div>二、多行文本的垂直居中1.使用disp 查看详情
让div盒子相对父盒子垂直居中的几种方法(代码片段)
方法1:宽度和高度已知的。 思路： 给父元素相对定位 给子元素绝对定位 left:50%;top:50%; margin-left:负的宽度一半。 margin-top:负的高度一半；<html>2<headlang="en">3<metacharset="UTF-8">4<title>&l 查看详情
让div居中的方式的几种方法(代码片段)
让div水平居中的方式的几种方法。文章目录一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结一、margin第一种方式我们可以利用外边距属性来使div水平垂直居中先来看一段有问题的代码<!DOCTYPEhtml><... 查看详情
让一个元素水平垂直居中的几种方法(代码片段)
让一个元素水平垂直居中的几种方法1.方法一——margin负div.boxweight:200px;height:400px;position:absolute;<!--设置元素的定位位置，距离上、左都为50%-->left:50%;top:50%;<!--设置元素的左外边距、上外边距为宽高的负1/2-->margin-lef... 查看详情
html中div居中的几种方法
在开发过程中，很多需求需要我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。1.text-align:center。代码：<divcla... 查看详情
css水平垂直居中的几种方法
一、脱离文档流元素的居中方法一：margin:auto法CSS代码：div{width:400px;height:400px;position:relative;border:1pxsolid#465468;}img{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;}HTML代码：<div><imgsrc=" 查看详情
css水平垂直居中的几种方法
直接进入主题！一、脱离文档流元素的居中方法一：margin:auto法CSS代码：div{width:400px;height:400px;position:relative;border:1pxsolid#465468;}img{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;}HTML代码：<div><i 查看详情
div实现垂直居中的几种方法
说道垂直居中，我们首先想到的是vertical-align属性，但是许多时候该属性并不起作用。例如，下面的样式并不能达到内容垂直居中显示1div{2width:200px;3height:300px;4border:1pxsolid#000;5vertical-align:middle;6}原来vertical-align属性仅能够作用于... 查看详情
div水平垂直居中的几种方法
参考技术A1、margin固定宽高居中；2、负margin居中；3、绝对定位居中；4、table-cell居中；5、flex居中；6、transform居中；7、不确定宽高居中(绝对定位百分数)；8、button居中。 查看详情
css水平垂直居中的几种方法2
直接进入主题！一、脱离文档流元素的居中方法一：margin:auto法CSS代码：div{width:400px;height:400px;position:relative;border:1pxsolid#465468;}img{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;}HTML代码：<div><i 查看详情
元素垂直居中的几种方式(代码片段)
第一种<divclassName="boxOne"><divclassName="boxOne_erz"></div></div>.boxOnewidth:200px;height:200px;background:pink;display:flex;justify-content:center;al 查看详情
div居中的几种方法
1.1body{2text-align:center;3}缺点：body内所有内容一并居中 2..center{position:fixed;left:50%;}缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中 3.1.center{2width:500px;3margin:0auto;4}缺点：需要设置div宽... 查看详情
让div水平和垂直居中的几种方法
我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和... 查看详情
让div水平和垂直居中的几种方法
我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和... 查看详情
元素水平垂直居中的几种常用方法(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>元素水平垂直居中</title><style>/*方式一*/.boxwidth:100px;height:100px;background:red;position:absolute;top:50%;lef 查看详情
css元素垂直居中的几种方法
在网页响应式布局中，实现水平居中很简单。可是，垂直居中方面，元素的宽度和高度是不可控的，所以很多办法并不适用。总结了下平时用到的垂直居中的几种办法：demo中HTML代码：<divclass="center"><span></span></div... 查看详情
让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法，之前在网上看到很多种方法，确实说的很对，也很具体，但是我感觉对于初学者来说，一目了然是最重要的，所以，我把很高深的技巧，和很复杂的css样式都剔除掉，旨在让更多人能看懂。... 查看详情
理解水平居中的几种表现(代码片段)
CSS居中算是一个比较基础的问题，在实际运用中，需要考虑到的一般是两种情况，一种是主要是表现为文字，图片等行内元素的居中，一种是指div等块级标签元素的居中。1.水平居中 text-align【场景一】：在父元素中设置text-a... 查看详情