Comments (11)
1、块级元素,设置宽高,需要谁居中,给其设置 margin: 0 auto;
2、行内元素:首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center; 如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;
3、使用绝对定位:首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;
4、使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
from step-by-step.
- 父元素使用padding
- flex布局
display: flex;
justify-content: center;
align-items:center; - 使用绝对定位和transform
positon: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); - 使用绝对定位和负的margin
position: absolute;
left: 50%;
top: 50%;
margin-left: -宽的一半;
margin-top: - 高的一半; - margin auto
margin: 0 auto;
margin-top: 高的一半; - table-cell
.parent{
width: 300px;
height: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son{
width: 50px;
height:50px;
background:yellow;
border: 1px solid blue;
display: inline-block;
} - text-align: center和line-height
from step-by-step.
display:flex;
justify-content: center;
align-items: center;
from step-by-step.
1、 使用position/transform/top/left( 已知宽高)
2 、 使用display:flex/flex/align-items: center;jusitify-content: center
3、 margin: 0 auto;(已知宽度)
4、 使用grid
.parent{
display: grid;
}
.left {
justify-self: center;
align-self: center;
/* 以上可以简写为 place-self: center;*/
height: 100px;
width: 100px;
/* float: left; */
background-color: blueviolet;
}
from step-by-step.
父元素 .container
子元素 .box
利用 flex
布局
/* 无需知道被居中元素的宽高 */
.container {
display: flex;
align-items: center;
justify-content: center;
}
子元素是单行文本
设置父元素的 text-align
和 line-height = height
.container {
height: 100px;
line-height: 100px;
text-align: center;
}
利用 absolute
+ transform
/* 无需知道被居中元素的宽高 */
/* 设置父元素非 `static` 定位 */
.container {
position: relative;
}
/* 子元素绝对定位,使用 translate的好处是无需知道子元素的宽高 */
/* 如果知道宽高,也可以使用 margin 设置 */
.box {
position: absolute;
left: -50%;
top: -50%;
transform: translate(-50%, -50%);
}
利用 grid
布局
/* 无需知道被居中元素的宽高 */
.container {
display: grid;
}
.box {
justify-self: center;
align-self: center;
}
利用绝对定位和 margin:auto
/* 无需知道被居中元素的宽高 */
.box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.container {
position: relative;
}
from step-by-step.
设置元素样式为:
display:flex;
justify-content: center;
align-items: center;
from step-by-step.
行内元素居中 text-align: center + line-height;
弹性布局flex;
绝对定位 absolute + margin/transform/calc;
from step-by-step.
- 绝对定位 + margin:auto
- 绝对定位 + 负margin (需已知宽高)
- 绝对定位 + transform
- flex布局
from step-by-step.
1.单行文本,只需要将文本行高(line-height)和所在区域高度(height)设为一致即可
p{
height:40px;
line-height:40px
}
2.父元素高度不确定,只能靠内部文本内容撑开。可以设置margin,padding值相等
假设父元素是div
div{
margin: 30px auto;
padding:20px ;
}
3.父级高度固定的时,设置父级div的display属性:display: table;;然后再添加一个div包含文本内容,设置其display:table-cell;和vertical-align:middle
4、flex的垂直居中,这种做法可以不定义内部元素的高度
5.使用absolute+transform
from step-by-step.
- 使用Flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
display:flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
background: #FD0C70;
}
.parent4 .child{
color:#fff;
}
</style>
<body>
<div class="parent4">
<div class="child">hello world-4</div>
</div>
</body>
</html>
- 使用绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
position:absolute;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color:black;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
<div class="child">hello world-3</div>
</div>
</body>
</html>
- inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent2{
height:300px;
width: 300px;
text-align: center;
background: #FD0C70;
}
.parent2 span{
display: inline-block;
height:50%
}
.parent2 .child{
display: inline-block;
color: #fff;
}
</style>
<body>
<div class="parent2">
<span></span>
<div class="child">hello world-2</div>
</div>
</body>
</html>
- 使用 table 和 table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent1{
display: table;
height:300px;
width: 300px;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}
</style>
<body>
<div class="parent1">
<div class="child">hello world-1</div>
</div>
</body>
</html>
转载:https://www.cnblogs.com/jogen/p/5213566.html
from step-by-step.
解决方案有如下几种
绝对定位:
position:abaolute;
left:50%:
top:50%:
margin-left: -width/2;
margin-top: -width/2;
间距居中
position-absolute: 上下左右都为0;
margin:auto;
flex
display:flex
jusicitify-content:center;
align-items:center;
display:table-cell
display:table-cell;
vertical-align:middle
text-align:center;
单行文本居中:
text-align:center;
line-height:height;
from step-by-step.
Related Issues (20)
- 寄生组合式继承的基本**是什么?有哪些优缺点? HOT 11
- 实现一个 JSON.stringify HOT 9
- 实现一个 JSON.parse HOT 9
- 实现一个观察者模式 HOT 10
- ES6模块和CommonJS模块有哪些差异? HOT 8
- 如何使用Proxy实现简单MVVM HOT 2
- 以下代码的输出的结果为: HOT 7
- 列举常见的JS和CSS兼容性问题
- 介绍下 Set、Map、WeakSet 和 WeakMap 的区别? HOT 1
- Vue组件间是怎么进行参数传递的? HOT 4
- 如果浏览器主线程一直被占据,那么setTimeout会什么时候执行
- rem、em、vh、vw 有什么区别
- flex-grow 与 flex-shrink 的计算规则
- while循环卡死和微任务卡死有什么区别
- sourcemap原理是什么
- 闭包会导致内存泄漏为什么还要使用?
- 前端怎么显示1G的图片甚至1T的图片
- 手写lodash的get方法
- setTimeout回调和fetch回调哪个先执行
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from step-by-step.