html元素水平居中的方法

本文格式为Word版，下载可任意编辑——html元素水平居中的方法html元素水平居中的方法

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

方法1：

代码如下:

pclass=wrap

pclass=left-right-middle1左右居中方法1/p

/p

代码如下:

html,body,p

margin:0;

padding:0;

height:100%;

position:relative;

.wrap

width:400px;

height:300px;

margin:10px;

border:1pxsolid#000;

.left-right-middle1

width:200px;

background-color:#69F;

margin:0auto;

方法2：

代码如下:

pclass=wrap

pclass=left-right-middle2左右居中方法2/p

/p

代码如下:

html,body,p

margin:0;

padding:0;

height:100%;

position:relative;

.wrap

width:400px;

height:300px;

margin:10px;

border:1pxsolid#000;

.left-right-middle2

width:200px;

background-color:#69F;

left:50%;

margin-left:-100px;

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

代码如下:

pclass=wrap

pclass=top-bottom-middle上下居中/p

/p

代码如下:

html,body,p

margin:0;

padding:0;

height:100%;

position:relative;

.wrap

width:400px;

height:300px;

margin:10px;

border:1pxsolid#000;

.top-bottom-middle

height:200px;

background-color:#69F;

top:50%;

margin-top:-100px;

html元素水平居中的方法

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

方法1：

代码如下:

pclass=wrap

pclass=all-middle1上下左右居中方法1/p

/p

代码如下:

html,body,p

margin:0;

padding:0;

height:100%;

position:relative;

.wrap

width:400px;

height:300px;

margin:10px;

border:1pxsolid#000;

.all-middle1

width:200px;

height:200px;

background-color:#69F;

top:50%;

margin:-100pxauto0;

方法2：

代码如下:

pclass=wrap

pclass=all-middle2上下左右居中方法2/p

/p

代码如下:

html,body,p

margin:0;

padding:0;

height:100%;

position:relative;

.wrap

width:400px;

height:300px;

margin:10px;

border:1pxsolid#000;

.all-middle2

width:200px;

height:200px;

background-color:#69F;

top:50%;

left:50%;

margin:-100px00-100px;

完整代码：

代码如下:

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://./TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=http://./1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/htmlcharset=utf-8/

titlepMiddle/title

styletype=text/css

html,body,p

margin:0;

padding:0;

height:100%;

position:relative;

.wrap

width:400px;

height:300px;

margin:10px;

border:1pxsolid#000;

.left-right-middle1

width:200px;

background-col