您现在的位置是：网站首页> 编程资料编程资料

html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法css 不定宽高的元素居中布局解决方案CSS实现元素居中原理解析浅谈css元素居中CSS元素居中布局的简单方法CSS实现定位元素居中的方法css控制div中元素居中的示例css实现元素居中的N种方法

2021-09-06 961人已围观

简介这篇文章主要介绍了html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法,需要的朋友可以参考下

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

方法1：

复制代码

代码如下:

左右居中方法1

复制代码

代码如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.left-right-middle1{
width:200px;
background-color:#69F;
margin:0 auto;
}

方法2：

复制代码

代码如下:

左右居中方法2

复制代码

代码如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.left-right-middle2{
width:200px;
background-color:#69F;
left:50%;
margin-left:-100px;
}

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

复制代码

代码如下:

上下居中

复制代码

代码如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.top-bottom-middle{
height:200px;
background-color:#69F;
top:50%;
margin-top:-100px;
}

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

方法1：

复制代码

代码如下:

上下左右居中方法1

复制代码

代码如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.all-middle1{
width:200px;
height:200px;
background-color:#69F;
top:50%;
margin:-100px auto 0;
}

方法2：

复制代码

代码如下:

上下左右居中方法2

复制代码

代码如下:

html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.all-middle2{
width:200px;
height:200px;
background-color:#69F;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

完整代码：

复制代码

代码如下:

Div Middle

左右居中方法1

左右居中方法2

上下居中

上下左右居中方法1

上下左右居中方法2

效果图：