网站首页 > 技术文章 正文
本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。
水平居中
- 行内元素
这种情况最简单,只需要将行内元素包括在一个display属性为block的父元素中,并且设置父元素text-align为居中即可
.border {
width: 400px;
line-height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="border">
<span>行内元素</span>
</div>
- 块状元素
对块状元素设置相应的外边距即可,外边距左、右设置为auto。
.parent {
width: 400px;
height: 100px;
border: 1px solid red;
}
.block-child {
width: 100px;
border: 2px solid black;
margin: 10px auto;
text-align: center;
}
<div class="parent">
<div class="block-child">块状元素</div>
</div>
- 多个块状元素①
传统方法,在父元素设置text-align:center; 然后将需要居中的块状元素的display设置为inline-block
.border {
width: 400px;
line-height: 100px;
border: 1px solid red;
text-align: center;
}
.inline-block {
display: inline-block;
border: 1px solid black;
}
<div class="border">
<div class="inline-block">块状元素1</div>
<div class="inline-block">块状元素2</div>
<div class="inline-block">块状元素3</div>
</div>
- 多个块状元素②
使用flex布局实现,将父元素display设置为flex,同时设置子元素对齐。
.parent-flex {
width: 400px;
border: 1px solid red;
display: flex;
justify-content: center;
}
<div class="parent-flex">
<div style="border: 1px solid black;">块状元素1</div>
<div style="border: 1px solid black;">块状元素2</div>
<div style="border: 1px solid black;">块状元素3</div>
</div>
垂直居中
- 单行行内元素
将行内元素的 line-height 属性与其父元素的 height 属性设置为相同值,比如都是40px。
- 多行的行内元素
通过设置父元素display属性为table-cell,及其他相关属性解决。
.parent-table-cell {
width: 400px;
height: 100px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class="parent-table-cell">
<span>行内元素1</span><br>
<span>行内元素2</span><br>
<span>行内元素3</span>
</div>
- 已知高度的块状元素
结合元素的position及margin属性,通过定位设置居中,父元素position设置为relative。
.item{
top: 50%; // 顶部位置位于父元素的50%处
margin-top: -50px; // margin-top 值为自身高度的一半
position: absolute; //position也可以是
}
注意:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持display属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
喜欢就关注支持一下吧。[呲牙][呲牙]
- 上一篇: 采用后端代码方式实现对Html元素封装与输出
- 下一篇: kubectl常用命令(一)
猜你喜欢
- 2025-01-06 采用后端代码方式实现对Html元素封装与输出
- 2025-01-06 HTML页面基本结构和加载过程
- 2025-01-06 带你了解用5个div让你闯进弹性布局
- 2025-01-06 前端入门——浮动float
- 2025-01-06 简析JS中Document与CSS
- 2025-01-06 CSS样式优先级怎样划分?【CSS优先级规则】
- 2025-01-06 谷歌F12开发者工具面板解析操作
- 2025-01-06 这8个卡片设计方法,你还真不一定知道
- 2025-01-06 「CSS三种居中方案全解」CSS垂直居中常用方法集结
- 2025-01-06 html开发笔记22-表单元素「用户名、密码、单选框、多选框」
- 08-06中等生如何学好初二数学函数篇
- 08-06C#构造函数
- 08-06初中数学:一次函数学习要点和方法
- 08-06仓颉编程语言基础-数据类型—结构类型
- 08-06C++实现委托机制
- 08-06初中VS高中三角函数:从"固定镜头"到"360°全景",数学视野升级
- 08-06一文讲透PLC中Static和Temp变量的区别
- 08-06类三剑客:一招修改所有对象!类方法与静态方法的核心区别!
- 最近发表
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- windowsscripthost (69)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (70)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)