Skip to content

Instantly share code, notes, and snippets.

@JiaxiangZheng
Created May 23, 2015 08:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save JiaxiangZheng/b66d4df8bd72509a1c9a to your computer and use it in GitHub Desktop.
文本居中示例[CSS] CSS实现的垂直居中方法 // source http://jsbin.com/xapowo
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CSS实现的垂直居中方法">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>文本居中示例[CSS]</title>
<style id="jsbin-css">
.example {
position: relative;
padding: 20px;
margin-bottom: 50px;
border: 2px solid gray;
border-radius: 4px;
}
.example:before {
position: absolute;
top: 0;
content: "example";
font-size: 12px;
color: red;
}
.box {
position: relative;
height: 150px;
border-radius: 4px;
border: 1px solid #333;
padding: 5px;
}
#ex1-content {
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#ex2-content {
text-align: center;
line-height: 150px;
}
#ex3-parent {
display: table;
}
#ex3-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="example">
<p>使用 CSS3 的<code>transform</code>可以实现垂直居中:</p>
<pre>
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
</pre>
<div class="box">
<div id="ex1-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus sequi, labore hic culpa quasi rerum officiis laudantium voluptates nulla deleniti.</div>
</div>
</div>
<div class="example">
<p>使用<code>line-height</code>实现单行文字的垂直居中,将<code>line-height</code>高度设置与框的高度一样即可。</p>
<div class="box">
<div id="ex2-content">Lorem ipsum dolor</div>
</div>
</div>
<div class="example">
<p>前面的两种方法实际使用上会有诸多的限制,方法一虽然好,但是对于老版本浏览器是不适用的。比较实用的方法是使用<code>display: table-cell</code><code>vertical-align: middle;</code></p>
<pre>
#ex3-parent {
display: table;
}
#ex3-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</pre>
<div class="box" id="ex3-parent">
<p id="ex3-content">aliquid sequi eaque quidem illum atque saepe et odit laboriosam. Molestias, minus quibusdam placeat voluptatum?</p>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.example {
position: relative;
padding: 20px;
margin-bottom: 50px;
&:before {
position: absolute;
top: 0;
content: "example";
font-size: 12px;
color: red;
}
border: 2px solid gray;
border-radius: 4px;
}
.box {
position: relative;
height: 150px;
border-radius: 4px;
border: 1px solid #333;
padding: 5px;
}
#ex1-content {
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#ex2-content {
text-align: center;
line-height: 150px;
}
#ex3-parent {
display: table;
}
#ex3-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}</script>
</body>
</html>
.example {
position: relative;
padding: 20px;
margin-bottom: 50px;
border: 2px solid gray;
border-radius: 4px;
}
.example:before {
position: absolute;
top: 0;
content: "example";
font-size: 12px;
color: red;
}
.box {
position: relative;
height: 150px;
border-radius: 4px;
border: 1px solid #333;
padding: 5px;
}
#ex1-content {
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#ex2-content {
text-align: center;
line-height: 150px;
}
#ex3-parent {
display: table;
}
#ex3-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment