如何使用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到中心