水平居中
水平居中实现只要设置margin：0 auto;就可以实现
<html lang="en">
<head>
<meta charset="utf-8">
<title>水平居中title>
<style type="text/css">
#box{width: 200px;height: 200px;background: red;margin: 0 auto;}
style>
head>
<body>
<p id="box">p>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
垂直居中
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中title>
<style type="text/css">
#box{
width: 200px;height: 200px;background: red;position:absolute;top:50%;margin-top: -100px;
}
style>
head>
<body>
<p id="box">p>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
CSS实现水平垂直居中
<html lang="en">
<head>
<meta charset="utf-8">
<title>css实现水平垂直居中title>
<style type="text/css">
.box{
/*
负边距+定位：水平垂直居中（Negative Margin）
使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），
将content的中心拉回到body的中心，已到达水平垂直居中的效果。
*/
width:200px;
height:200px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top: -100px;
}
style>
head>
<body>
<p class="box">p>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
CSS实现水平垂直居中（法2）
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中布局title>
<style type="text/css">
html,body{
width: 100%;height: 100%;margin: 0;padding: 0;
}
#box {
width: 300px;
height: 300px;
background: red;
margin: 0 auto; /*水平居中*/
position: relative;/*相对自己当前进行定位*/
top: 50%;
margin-top: -150px;
}
style>
head>
<body>
<p id="box">p>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
CSS3实现垂直水平居中
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3实现垂直水平居中title>
<style type="text/css">
#p1{
width: 200px;height: 200px;background: red;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%); /* 这里我们使用css3的transform来达到类似效果 */
}
style>
head>
<body>
<p id="p1">p>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
CSS3 flex实现元素的垂直居中
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中布局title>
<style type="text/css">
html,body{
width: 100%;height: 100%;margin: 0;padding: 0;
}
body{
display: flex;align-items: center;justify-content: center;
}
#box{
width: 200px;height: 200px;background: red;
}
style>
head>
<body>
<p id="box">p>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
浮动元素居中
<html lang="en">
<head>
<meta charset="utf-8">
<title>如何居中一个浮动元素title>
<style type="text/css">
.p{
position: relative;
float: left;
left:50%;
border: 1px solid red;
}
.c{
position: relative;
float: left;
right: 50%;
}
style>
head>
<body>
<p class="p">
<h1 class="c">居中浮动元素h1>
p>
body>
html>