html元素水平居中的方法

html元素有哪些？水平居中于其父级元素的方法你是否知道呢？就让小编来告诉你们哦！

　　方法1：

代码如下:

<p class="wrap">

<p class="left-right-middle1">左右居中方法1</p>

</p>

代码如下:

html,body,p{

margin:0;

padding:0;

height:100%;

position:relative;

}

{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

-right-middle1{

width:200px;

background-color:#69F;

margin:0 auto;

}

方法2：

代码如下:

<p class="wrap">

<p class="left-right-middle2">左右居中方法2</p>

</p>

代码如下:

html,body,p{

margin:0;

padding:0;

height:100%;

position:relative;

}

{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

-right-middle2{

width:200px;

background-color:#69F;

left:50%;

margin-left:-100px;

}

html元素 垂直居中 于 其父级元素的.方法：

代码如下:

<p class="wrap">

<p class="top-bottom-middle">上下居中</p>

</p>

代码如下:

html,body,p{

margin:0;

padding:0;

height:100%;

position:relative;

}

{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

-bottom-middle{

height:200px;

background-color:#69F;

top:50%;

margin-top:-100px;

}