居中分为垂直居中和水平居中。
水平居中
水平居中分为文字居中和元素居中。元素又分为块元素和行内元素以及复合行内元素。
文字水平居中文字水平居中可以直接用text-align:center;
块元素水平居中块元素需要先给一个width,之后将margin的左右设置为auto就行了
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>块元素水平居中title>
<style type="text/css">
.wrapper{
width: 200px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
background-color: burlywood;
}
style>
head>
<body>
<div class="wrapper">div>
body>
html>
行内元素和复合行内元素水平居中复合行内元素即是行内块元素、inline-table、inline-flex等。
行内元素和复合行内元素可以直接用text-align:center;实现水平居中,与文字居中相似。
垂直居中
垂直居中分为文字垂直居中和元素垂直居中。
文字分为单行文字和多行文字
元素分为块元素和行内块元素
单行文字垂直居中需要把height与line-height相等就能实现
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>单行文字垂直居中title>
<style type="text/css">
.wrapper{
height: 100px;
width: 200px;
line-height: 100px;
border: 1px solid black;
}
style>
head>
<body>
<div class="wrapper">我真的是太帅了div>
body>
html>
多行文字垂直居中
实现:用标签把所有文字包含,定义span为inline-block元素,之后使用inline-块元素垂直居中的方式,可以先看下面inline-block元素垂直居中方式。
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>多行文字垂直居中title>
<style type="text/css">
.wrapper{
display: table-cell;
vertical-align: middle;
width: 200px;
height: 150px;
border: 1px solid black;
}
span{display: inline-block;}
style>
head>
<body>
<div class="wrapper">
<span>刘德华<br />
张学友<br />
郭富城<br />
黎明
span>
div>
body>
html>
块元素垂直居中对于高度已知的块元素,可以使用position实现。
方法是:
父元素{
position: relative;
}
子元素{
position: absolute;
top: 50%;
left: 50%;
margin-top: "height值一半的负值";
margin-left: "width值一半的负值";
}
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>块元素垂直居中title>
<style type="text/css">
.father{
position: relative;
width: 200px;
height: 150px;
border: 1px solid black;
}
.son{
position: absolute;
top: 50%;
left: 50%;
background-color: blue;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
如果单独需要水平居中,将top和margin-top属性去掉。单独需要垂直居中将left和margin-left属性去掉。
行内块元素垂直居中方法:
父元素{
display: table-cell;
vertical-align: middle;
}
子元素{
vertical-align: middle;
}
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>行内块元素垂直居中title>
<style type="text/css">
.wrapper{
display: table-cell;
vertical-align: middle;
width: 200px;
height: 150px;
border: 1px solid black;
}
img{
vertical-align: middle;
}
style>
head>
<body>
<div class="wrapper">
<img src="C:\Users\雨殇\Desktop\lion.png" alt=""/>
div>
body>
html>
本节主要学习了居中技巧,最后对其总结。
总体分为水平居中和垂直居中
文字水平居中
块元素水平居中
行内元素和复合行内元素水平居中
单行文字垂直居中
多行文字垂直居中
块元素垂直居中
行内块垂直居中