CSS子元素居中(父元素宽高已知,子元素未知)

简介: .container{width:400px; height:400px; position:relative;} .center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; wi...
<style>
.container{width:400px; height:400px; position:relative;}
.center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; 
         width:50px; height:50px;  //宽高可以不写
}
</style>
<div class="container">
  <div class="center"></center>
</div>

父元素高度已知,子元素宽高未知,  水平垂直居中很好用

相关文章
|
2月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
57 0
|
2月前
|
前端开发
CSS3新增的has伪类选择器,让你能轻松选择父元素
CSS3新增的has伪类选择器,让你能轻松选择父元素
40 0
|
25天前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
21 1
|
25天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
20 0
|
1月前
|
前端开发
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
14 0
|
11月前
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
82 0
|
2月前
|
前端开发
css 实现 div 宽高同比
css 实现 div 宽高同比
40 0
|
8月前
|
前端开发 JavaScript
CSS: hover选择器控制子元素的出现和隐藏
CSS: hover选择器控制子元素的出现和隐藏
72 0
|
10月前
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
31 0
|
10月前
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
58 0