css实现div水平/垂直居中的N中方法

张红新发布于2019-08-01 15:23 / 1965人阅读

摘要：父内部的所有子水平居中代码子元素纵向排列水平居中代码子元素横向排列且水平居中代码子元素纵向排列垂直居中代码子元素横向排列垂直居中代码子元素水平方向垂直方向都居中方式一代码子元素水平方向垂直方向都居中方式二如果有多个子元素会

1、父div内部的所有子div水平居中

// html 代码

    
    
    


/*子元素纵向排列水平居中*/
// css 代码
.parent{
    width: 400px; 
    height: 600px; 
} 
.chil{ 
    width: 120px;
    height: 120px; 
    margin: 0 auto; 
}

/*子元素横向排列且水平居中*/
//css代码
.parent{
    width: 400px;
    height: 400px;
    text-align: center;

}
.chil{
    width: 120px;    
    height: 120px;
    display: inline-block;
}

/*子元素纵向排列垂直居中*/
//css 代码
.parent{
    width: 400px; 
    height: 600px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素横向排列垂直居中*/
// cs 代码
.parent{
    width: 400px; 
    height: 400px; 
    display: flex; 
    align-items:center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素水平方向垂直方向都居中 方式一*/
//css代码
.parent{
    width: 400px; 
    height: 400px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    display: inline-block; 
}

/*子元素水平方向垂直方向都居中 方式二 如果有多个子元素会重叠在父元素中心位置*/
//css代码
.parent{
    width: 400px; 
    height: 400px; 
    position: relative; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform:translate(-50%, -50%);
    //transform:translate(0, -50%); 垂直方向上居中且多个子元素重叠
    //transform:translate(-50%); 水平方向上居中且多个子元素重叠
}

云服务器 GPU云服务器水平垂直居中实现垂直居中 html的水平居中 css中div

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49883.html

css实现div水平/垂直居中的N中方法

摘要：父内部的所有子水平居中代码子元素纵向排列水平居中代码子元素横向排列且水平居中代码子元素纵向排列垂直居中代码子元素横向排列垂直居中代码子元素水平方向垂直方向都居中方式一代码子元素水平方向垂直方向都居中方式二如果有多个子元素会 1、父div内部的所有子div水平居中 // html 代码 /*子元素纵向排列水平居中*/ // css 代码 .parent...

miqt 2019-08-29 10:55 评论0 收藏0
水平垂直居中

摘要：它为什么备受关注并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。多行块级元素实现原理同水平居中的水平垂直居中综合运用水平垂直居中即可。它为什么备受关注？并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。将各个问题分类，给出常用解水平居中行内元素： text-align:center html: text-align:cent...

MingjunYang 2019-08-29 11:29 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

scwang90 2019-08-30 14:19 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

Lsnsh 2019-08-02 10:04 评论0 收藏0