效果图:
贴代码:
实现方法一:position + translate 方案
1.
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>完全居中</
title>
<
style>
#box{
width:
500
px;
height:
500
px;
background:
pink;
margin:
0
auto;
position:
relative;
}
#con{
width:
200
px;
height:
200
px;
background:
yellow;
position:
absolute;
top:
50
%;
left:
50
%;
transform:
translate(
-50
% ,
-50
%);
}
</
style>
</
head>
<
body>
<
div
id=
"box">
<
div
id=
"con"></
div>
</
div>
</
body>
</
html>
2.
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>水平垂直居中</
title>
<
style>
#box{
width:
500
px;
height:
500
px;
background:
yellow;
margin:
0
auto;
}
#con{
width:
200
px;
height:
200
px;
background:
pink;
margin:
0
auto;
position:
relative;
top:
50
%;
transform:
translateY(
-50
%);
}
</
style>
</
head>
<
body>
<
div
id=
"box">
<
div
id=
"con"></
div>
</
div>
</
body>
</
html>
以上两种大同小异
方案二:flex弹性盒布局
1.
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>完全居中</
title>
<
style>
#box{
width:
500
px;
height:
500
px;
background:
yellow;
margin:
0
auto;
display:
flex;
}
#con{
width:
200
px;
height:
200
px;
background:
pink;
margin:
auto;
}
</
style>
</
head>
<
body>
<
div
id=
"box">
<
div
id=
"con"></
div>
</
div>
</
body>
</
html>
2.
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>完美居中2</
title>
<
style>
#box{
width:
500
px;
height:
500
px;
background:
yellow;
margin:
0
auto;
display:
flex;
/* flex-direction: column; */
/* justify-content: center; */
align-items:
center;
}
#con{
width:
200
px;
height:
200
px;
background:
pink;
/* margin: auto; */
margin:
0
auto;
}
</
style>
</
head>
<
body>
<
div
id=
"box">
<
div
id=
"con"></
div>
</
div>
</
body>
</
html>
3.
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>完美居中2</
title>
<
style>
#box{
width:
500
px;
height:
500
px;
background:
yellow;
margin:
0
auto;
display:
flex;
flex-direction:
column;
justify-content:
center;
/* align-items: center; */
}
#con{
width:
200
px;
height:
200
px;
background:
pink;
/* margin: auto; */
margin:
0
auto;
}
</
style>
</
head>
<
body>
<
div
id=
"box">
<
div
id=
"con"></
div>
</
div>
</
body>
</
html>
以上三种大同小异
具体实现过程不想赘述了,之前懒得整理,今天闲暇之余随手写了下