一、内联元素
1. 定义：
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
当然块状元素也可以通过代码display:inline将元素设置为内联元素。
内联元素特点：
-
1、和其他元素都在一行上；
-
2、元素的高度、宽度及顶部和底部边距不可设置；
-
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
2.水平居中
在其父元素（父元素一般为div这些块状元素）上设置text-align:center;
或display:flex; justify-content:center;
//html
<div class="father">
<span class="child">子内联</span>
</div>
//css
.father {
background: red;
text-align: center;
//或display:flex;
//justify-content:center;
}
.child {
background: green;
}
效果:
图片.png
3. 垂直居中
（1）父元素高度确定的单行文本（内联元素）,设置 height = line-height；
.father {
background: red;
height: 100px;
}
.child {
background: green;
line-height: 100px;
}
效果:
图片.png
（2） 父元素高度确定的多行文本（内联元素）
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；
b:先设置 display:table-cell 再设置 vertical-align:middle；
<style>
.father {
background: red;
height: 100px;
display: table-cell;
vertical-align: middle;
}
.child1 {
background: green;
}
.child2 {
background: yellow;
}
.child3 {
background: blue;
}
</style>
</head>
<body>
<div class="father">
<span class="child1">子内联1</span>
<span class="child2">子内联2</span>
<span class="child3">子内联3</span>
</div>
</body>
效果：
图片.png
二、块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如
a{display:block;}就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
块级元素特点：
-
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
-
2、元素的高度、宽度、行高以及顶和底边距都可设置。
-
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
1.水平居中
（1）定宽块状元素：
设置 左右 `margin: auto；`
图片.png
（2） 不定宽块状元素：
a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；
b:给该元素设置 display:inline 方法；
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%
2. 垂直居中
1.知道元素宽高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
or:
<style>
.father {
background: red;
display: table;
width: 300px;
height: 300px;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;//同时水平居中时加
}
</style>
</head>
<body>
<div class="father">
<div class="child">
子块状
</div>
</div>
图片.png
2.未知高度:仍然可以通过将其调高到其一半的高度来进行对中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2.灵活的Flex(推荐)
<style>
.father {
background: red;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
子块状
</div>
</div>
图片.png
水平和垂直
1.已知高宽
使用等于该宽度和高度的一半的负边距，在将其绝对定位在50％/ 50％之后，将以很好的跨浏览器支持为中心：
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.未知高宽
可以使用transform属性和两个方向上的50％负向平移（它基于元素的当前宽度/高度）居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.使用flex布局
要使用flexbox在两个方向上居中，您需要使用两个居中属性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
4.使用网格
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}
网友评论