用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
2024-08-27 06:04:18
一.水平居中
(1)行内元素解决方案
只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:
.parent {
text-align:center;
}
(2)块状元素解决方案
.item {
/* 这里可以设置顶端外边距 */
margin: 10px auto;
}
(3)多个块状元素解决方案
将元素的display属性设置为inline-block,并且把父元素的text-align属性设置为center即可:
.parent {
text-align:center;
}
(4)多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局,只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:
.parent {
display:flex;
justify-content:center;
}
二.垂直居中
(1)单行的行内元素解决方案
.parent {
background: #222;
height: 200px;
}
/* 以下代码中,将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a {
height: 200px;
line-height:200px;
color: #FFF;
}
(2)多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果,如下:
.parent {
background: #222;
width: 300px;
height: 300px;
/* 以下属性垂直居中 */
display: table-cell;
vertical-align:middle;
}
(3)已知高度的块状元素解决方案
.item{
top: 50%;
margin-top: -50px; /* margin-top值为自身高度的一半 */
position: absolute;
padding:0;
}
三.水平垂直居中
(1)已知高度和宽度的元素解决方案1
这是一种不常见的居中方法,可自适应,比方案2更智能,如下:
.item{
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}
(2)已知高度和宽度的元素解决方案2
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */
margin-left: -75px;
}
(3)未知高度和宽度元素解决方案
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
}
(4)使用flex布局实现
.parent{
display: flex;
justify-content:center;
align-items: center;
/* 注意这里需要设置高度来查看垂直居中效果 */
background: #AAA;
height: 300px;
}
最新文章
- Linq学习总结2--Linq to XML
- SQL 执行顺序
- 防止被dylib hook的小技巧
- Transform DataGrid 套用格式
- 任意轴算法 ( Arbitrary Axis Algorithm )
- php 设置字符集为utf-8
- dubbo个人总结
- iOS控制器跳转动画
- bash中声明变量方法
- 漫谈Java IO之普通IO流与BIO服务器
- android自定义组件的简易实现
- Maven的安装、配置及使用入门+maven安装报错:JAVA_HOME【申明:来源于网络】
- 洛谷P4362 贪吃的九头龙
- POJ 2528 Mayor's posters (线段树+离散化)
- websocket和socketio的总结
- JNDI在Spring和tomcat下的使用
- tronado学习
- PHP 重置数组为连续数字索引的几种方式
- phpexcel错误 You tried to set a sheet active by the out of bounds index: 1解决办法
- AI-终极算法-遗传算法
热门文章
- 2019暑期北航培训—预培训作业-IDE的安装与初步使用(Visual Studio版)
- How George Washington Angered Lawmakers Over Thanksgiving——VOA慢速英语
- Java中的IO流之输入流|乐字节
- 最小二乘求解常数k使得kx=y(x,y为列向量)
- [转帖]Hadoop与Spark比较
- BJFU——205基于顺序存储结构的图书信息表的排序
- 【Leetcode】746. Min Cost Climbing Stairs
- 从其他数据库迁移到MySQL及MySQL特点
- springboot处理事务
- VS.NET(C#)--2.6_ASP.NET服务器控件层次结构