摘要： flexbox是个很强大的布局模块，三个属性就搞定居中，而且不论父容器还是居中元素都可以不定宽高
水平居中
align="center"
直接在标签对象内加align="center"即可让对象内图片横向水平居中显示
align="center"使用方法：
<div align="center">aaa</div>
点击并拖拽以移动
text-align:center
<style> .divcss5{text-align:center} </style> <div class="mipa2c748c8e1457d29 divcss5">aaa</div>
点击并拖拽以移动
text-align是针对父元素进行设置,只能对图片，按钮，文字等行内元素(display为inline或inline-block等)起作用，起作用的首要条件是子元素必须没有被float影响。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的
把margin设为auto
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效
<style> body{ text-align:center} .div{ margin:0 auto;} </style> <div class="mip48c8e1457d29ab69 div">aaa</div>
点击并拖拽以移动
使用display:table-cell来居中
表格中只要用到 td(或 th)元素的 align="center" 和 valign="middle" 这两个属性就可以完美处理,而且表格默认对它里面的内容进行垂直居中。在css中控制表格内容的居中可以使用 vertical-align:middle，至于水平居中，css中没有相对应的属性的,但在IE6、7中可以用text-align:center对表格里的元素设置，IE8+及谷歌、火狐等的text-align:center只对行内元素起作用，对块状元素无效
对于不是表格的元素，可以通过display:table-cell 来模拟成一个表格单元格，这样就可以利用表格很方便的居中特性了
<div style="display:table-cell;width:200px;height:200px;border:1px solid #ccc;"> <div>aaa</div> </div>
点击并拖拽以移动
使用绝对定位来进行居中
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把绝对定位元素的left属性设为50%,此时元素并不居中，而是比向右偏了这个元素宽度的一半，需要使用一个负的margin-left把它拉回到居中的位置，这个负的margin值就取元素宽度的一半
使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了
<style> .child{width:100px;height:100px;position:absolute;left:50%;margin-left:-50px;} </style> <div class="mipe1457d29ab691bbb parent"> <div class="mip7d29ab691bbb96ec child">aaa</div> </div>
点击并拖拽以移动
利用盒模型实现水平居中--padding填充
margin
绝对居中
<style> .Center {width:100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <div class="mip82798a45db031a10 Center">aaa</div>
点击并拖拽以移动
优点：支持跨浏览器，包括IE8-IE10。无需其他特殊标记，CSS代码量少。支持百分比%属性值和min-/max-属性。只用这一个类可实现任何内容块居中。不论是否设置padding都可居中（在不使用box-sizing属性的前提下）。内容块可以被重绘。完美支持图片居中。
缺点：必须声明宽度。建议设置overflow:auto来防止内容越界溢出。在Windows Phone设备上不起作用。
使用浮动配合相对定位来进行水平居中
<style> .parent{width:300px;height:200px;border:1px solid red;} .wraper{float:left;position:relative;left:50%;clear:both;} .child{border:1px solid blue;position:relative;left:-50%;white-spave:nowrap;} </style> <div class="mip8a45db031a1005c6 parent"> <div class="mipdb031a1005c60535 wraper"> <div class="mip1a1005c6053564f6 child">aaa</div> </div> </div>
点击并拖拽以移动
这个是浮动元素水平居中的解决方法，且我们不需要知道元素的宽度
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方后需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少
优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素
使用button标签
水平居中方案：
水平居中设置
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%
垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
在前端面试中，大都会问你div居中的方法：
文笔不好，就随便寥寥几句话概括了，希望大家能够轻拍
不过以后文笔肯定会变得更好一些的。
开始这些东西之前也可以测试一下你对html了解多少，让我们测试一下吧，小测验：你对HTML5了解有多少？
今天我们就细数一下几种方法：
1，使用position:absolute,设置left、top、margin-left、margin-top的属性
.one{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。
2，使用position:fixed,同样设置left、top、margin-left、margin-top的属性
.two{
position:fixed;
width:180px;
height:180px;
margin-top:-90px;
margin-left:-90px;
background:orange;
}
大家都知道的position:fixed,IE是不支持这个属性的
3，利用position:fixed属性，margin:auto这个必须不要忘记了。
.three{
position:fixed;
width:160px;
height:160px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:pink;
}
4，利用position:absolute属性，设置top/bottom/right/left
.four{
position:absolute;
width:140px;
height:140px;
background:black;
}
5，利用display:table-cell属性使内容垂直居中
.five{
display:table-cell;
vertical-align:middle;
text-align:center;
width:120px;
height:120px;
background:purple;
}
6，最简单的一种使行内元素居中的方法，使用line-height属性
.six{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
这种方法也很实用，比如使文字垂直居中对齐
7，使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center
.seven{
width:90px;
height:90px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
background:yellow;
color:black;
}
8，使用css3的新属性transform:translate(x,y)属性
.eight{
position:absolute;
width:80px;
height:80px;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:green;
}
这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好
9、最高大上的一种，使用:before元素
.nine{
position:fixed;
display:block;
background:rgba(0,0,0,.5);
}
.nine:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.nine .content{
width:60px;
height:60px;
line-height:60px;
color:red;
总而言之所有的居中的方法就是你必须要掌握css属性的这个概念HTML DIV+CSS，你掌握了就可以好好的运用这些居中的东西了
限时!！免费送Dreamweaver、js等前端教程
↓↓↓
相关问答
CSS文字垂直居中代码如下:CSS文字垂直居中代码如下:单行文字实现垂直居中
在WPS文字中,要将文本垂直居中,可以使用文本属性的垂直对齐选项。下面是具体步骤:1.打开WPS文字,打开要居中的文档。2.选中需要居中的文本区域。3.点击...
如果你想将一行字垂直居中,方法取决于你的应用场景。以下是一些方法:**在HTML中:**你可以使用CSS的`vertical-align`属性来实现。例如:```html如果...
1、第一种:用像素设定,很多都用这种,但是也是最麻烦的:1、第一种:用像素设定,很多都用这种,但是也是最麻烦的:2、第二种:用50%设定,很方便。3、第三种:用ce...
1.新建一个html文件,命名为test.html,用于讲解利用CSS怎么让文字居中。2.在test.html文件内,使用div标签创建一个模块,并设置其class属性为bob,下面将通过...
网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,
word中设置页眉页脚居中显示:在菜单栏里点击“视图”,在弹出的对话框中选择...align是水平居中valign就是垂直对齐文档保存为Word文档(.*docx)就可以了。...
已知盒子具体宽度(适用于居中浮动元素)给父元素相对定位,给子元素绝对定位left:50%;top:50%;margin-left:。margin-left:-(宽度度/2)。margi...
1、首先打开DW软件进入软件主界面,点击【插入】选项。2、找到【布局对象】——【Div标签】,即插入一个Div标签。3、设置类为【1】,再设置CSS样式,设长宽均...
利用css3实现垂直居中有很多方法,下面我简单的介绍几种css3实现垂直居中的方法,供大家参考;flex布局利用css3的新属性flex可以轻松实现垂直居中,具体方法,...
