文本居中示例[CSS] CSS实现的垂直居中方法 // source http://jsbin.com/xapowo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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