前端-水平垂直居中问题

效果图：

贴代码：

实现方法一：position + translate 方案

1.

< 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.

< 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.

< 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.

< 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>完美居中2title>

< 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.

< 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>完美居中2title>

< 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>

以上三种大同小异

具体实现过程不想赘述了，之前懒得整理，今天闲暇之余随手写了下