html中居中设定办法介绍（代码）
本篇文章给大家带来的内容是关于html中居中设定办法介绍（代码），有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。
水平居中
实际开发历程中我们会碰到许多需要元素水平居中的状况，例如文章标题等。这里常见的水平居中状况有行内元素和块级元素两种，块级元素又分为定宽块级元素和不定宽块级元素两种状况。定宽块级元素望文生义就是块级元素的width是个牢固的值；那么不定宽块级元素我们就知道是块级元素的width不是个定值的状况。
行内元素
当被设定的元素是文本、图片等行内元素的时候，我们是通过给父元素设定 text-align:center 来实现的。
<body>
<div class="textCenter">这是一个在父元素中居中元素</div>
</body>
<style>
textCenter{
text-align:center;
}
</style>由上述代码可知"这是一个在父元素中的居中元素"这段文字的父元素的CSS样式增添了 text-align:center；属性，所以文本展现居中。但是当被设定元素为块级元素时候这种方式就不太适用了，块级元素的状况又分为定宽块级元素和不定宽块级元素两种。
定宽块级元素
知足定宽块级元素"定宽"和"块级元素"两个前提是可以通过设定摆布margin的值为auto来实现居中。
<body>
<div>水平居中的定宽块级元素</div>
</body>
<style>
div{
border:1px solid blue;
width:100px; /*宽度设定牢固值*/
margin:10px auto;
}
</style>
/*或者也可以写成 margin-left:auto;
margin-right:auto;*/
/* 元素的上下margin属性可以照常设定，不受影响 */不定宽块级元素
不定宽块级元素的居中办法有三种：第一种是参加table标签；第二种是设定display:inline办法，与第一品种似，显示类型设为行内元素，停止不定宽元素的属性设定；第三种办法是设定position:relative和left:50%，利用相对定位的方式，将元素向左偏移50%用以实现居中的目的。
参加table标签
参加table标签是利用table标签的长度自顺应性（不定义其长度也不默许父元素body的长度，table长度是按照内文本长度决议的），因此可以看作一个定宽块级元素，然后再利用定宽块级元素居中的margin方式使其水平居中。
使用的方式第一步为需要设定居中的元素外面加一个table标签，然后为这个table设定"摆布margin居中"
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛劳</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>设定display:inline办法
改动块级元素的display为inline类型，设定为行内元素显示，然后使用 text-align:center来实现居中显示。这种办法相较于设定table方式的优势是不消增添无语义标签，但是这种方式也存在必然的问题，就是它将块状元素的display改为inline，元素变为行内元素后会少了一些功效使用。
<body>
<div class="container">
<ul>
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
</body>
<style>
.container{
text_align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:10px;
display:inline;
}
</style>设定position:relative和left:50%
通过给父元素设定float，然后设定position:relative和left:50%，子元素设定position:relative和left:50%来实现水平居中。
<body>
<div class="container">
<ul>
<li><a href=""#>First</a></li>
<li><a href=""#>Second</a></li>
<li><a href=""#>Third</a></li>
<li><a href=""#>Fourth</a></li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%
}
.container li{
float:left;
display:inline;
margin-right:8px
}
</style>垂直居中
垂直居中分为两种状况离别是父元素高度肯定的单行文本和父元素高度肯定的多行文本。
父元素高度肯定的单行文本
父元素高度肯定的单行文本竖直居中的办法是通过 设定父元素的height和line-height高度一致来实现的。height是该元素的高度，line-height是行高，也就是行间距，是行与行之间的基线间的间隔。line-height与font-size的运算值之差分为两半(在CSS中称为"行间距")，离别加到一个文本行内容的顶部和底部。可以包括这些内容的最小框就是行框。这种文字行高与块高一致带来了一个弊端，就是当文字内容的长度大于块的宽度的时候，就会有内容离开了块。
<div class="container">
hello,world!
</div>
<style>
.container{
height:10px;
line-height:10px;
}
</style>父元素高度肯定的多行文本
父元素高度肯定的多行文本、图片等竖直居中有两种方式，第一种是插入table标签，然后设定vertical-align:middle。CSS中有一个用于竖直居中的属性vertical-align，在父元素设定此样式时，会对inline-block类型的子元素都有用。
/* 方式一 */
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>居中一下</p>
</div>
</td></tr></tbody></table>
</body>
<style>
table td{
height:500px;
background:#ccc;
}
</style>
/* 方式二 */
<div class="container">
<div>
<p>居中一下下</p>
<p>居中一下下</p>
<p>居中一下下</p>
<p>居中一下下</p>
<p>居中一下下</p>
</div>
</div>
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>在 chrome、firefox 及 IE8 以上的阅读器下可以设定块级元素的 display 为 table-cell，激活 vertical-align 属性，但留意 IE6、7 并不支撑这个样式。
隐性改动display类型
在我们开发历程中当为元素设定 position:absolute 或者 float:left 属性的时候，元素的显示类型就会主动变为以display:inline_block (块级元素)的方式显示，可以设定元素的width和height。
<div class="container">
<a href="#" title="">点这里看看</a>
</div>
<style>
.container a{
position；absolute;
width:200px;
background:#ccc;
}
</style>相关引荐：
css html元素居中与html元素内容居中的不同
html的元素水平垂直居中应当如何设定
以上就是html中居中设定办法介绍（代码）的具体内容，更多请关注百分百源码网其它相关文章！
