如何使用CSS将内容集中在div中？
如何在div中横向和纵向放置内容？
这应该适合您的需求。 这是一个CSS-2D转换技巧。 我最近遇到以下解决scheme：
* { font-family: Arial; font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *:after, *:before { content: ""; display: table; } *:after { clear: both; } .title { font-family: Georgia; font-size: 36px; line-height: 1.25; margin-top: 0; } .blocks { position: relative; } .block { position: relative; display: inline-block; float: left; width: 200px; height: 200px; font-weight: bold; color: #FFFFFF; margin-right: 10px; margin-bottom: 10px; } .block:first-child { background-color: green; } .block:nth-child(2) { background-color: red; } .block:nth-child(3) { background-color: blue; } .h-center { text-align: center; } .v-center span { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); } <h1 class="title">3 Boxes with different text-align settings.</h1> <div class="blocks"> <div class="block h-center">horizontally centered lorem ipsun dolor sit amet</div> <div class="block v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div> <div class="block h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div> </div>
要水平alignment，它非常简单：
<style type="text/css"> body { margin: 0; padding: 0; text-align: center; } .bodyclass #container { width: ???px; /*SET your width here*/ margin: 0 auto; text-align: left; } </style> <body class="bodyclass "> <div id="container">type your content here</div> </body>
而对于垂直alignment，这有点棘手：这里的来源
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Universal vertical center with CSS</title> <style> .greenBorder {border: 1px solid green;} /* just borders to see it */ </style> </head> <body> <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div class="greenBorder" style=" #position: relative; #top: -50%"> any text<br> any height<br> any content, for example generated from DB<br> everything is vertically centered </div> </div> </div> </body> </html>
与所有的调整CSS。 如果可能的话，用高度和宽度为100％的表格包装它，并将其设置为垂直alignment到中间，文本alignment到中心
