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

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

2023-10-19 233人已围观

简介这篇文章主要介绍了css 不定宽高的元素居中布局解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1. 水平居中

公共代码:

html:

 parent 
 child

css:

 html, body { margin: 0; width: 100%; height: 100%; .parent { width: 100%; height: 100%; background: #fac3fa; .child { width: 50%; height: 50%; background: #fe9d38; } } }

方案一: text-align(父) + inline-block(子)

代码:
css:

 .parent { text-align: center; .child { display: inline-block; } }

方案二: 块级元素 + margin: 0 auto;

 .child { display: block; // 非块级元素时设置 margin: 0 auto; }

方案三: absolute + transform

 .parent { position: absolute; left: 50%; transform: translateX(-50%); }

方案四: flex

注: 由于使用flex的关系, 这里去掉了 parent 和

 .parent { display: flex; justify-content: center; }

2. 垂直居中

公共代码:
html:

css:

 html, body { margin: 0; width: 100%; height: 100%; } .parent { display: table-cell; width: 800px; height: 500px; background: #fac3fa; .child { width: 50%; height: 50%; background: #fe9d38; } }

方案一: table-cell(父) + vertical-align(子)

 .parent { display: table-cell; vertical-align: middle; }

方案二: absolute + transform

 .parent { position: relative; .child { position: absolute; top: 50%; transform: translateY(-50%); } }

方案三: flex

 .parent { display: flex; align-items: center; }

3. 水平垂直居中

公共代码同[垂直居中]

常用方案一: absolute + transform

 .parent { position: relative; .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } }

常用方案二: flex

 .parent { display: flex; align-items: center; justify-content: center; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：css简单动画之transition属性详解css动画属性使用及实例代码(transition/transform/animation) 使用css transition属性实现一个带动画显隐的微信小程序部件CSS3使用transition属性实现过渡效果CSS3中的元素过渡属性transition示例详解css3的transition属性详解css3中transition属性详解

下一篇：纯css写一个大太阳的天气图标的方法示例html+css3太阳系行星运转动画效果的实现代码

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

相关内容

点击排行

本栏推荐

猜你喜欢