CSS |居中元素

有时我们会遇到在网页中居中元素的问题。真的有那么难吗?将元素居中并不太难。有很多不同的方法来做到这一点。
我们需要知道的一件事是，哪种技术用于哪种目的。一旦你理解了这个问题，选择最好的技术就会容易得多。

因此，让我们看看一些情况并讨论实现目标的最佳方法。

1. 水平
   • 内联元素
     我们可以轻松地将内联元素居中放置在块级元素中，如下所示：

     // Aligning text in center
     .center
     {
          text-align: center;
     }
     

   • 块级元素
     我们可以给块级元素提供 auto 的 margin-left 和 margin-right(具有已知的指定宽度)：

     // Aligning an element of defined length in center
     // Remember to define the width of the element otherwise it 
     //will be full width and 'auto' will not work
     .center 
     {
         margin: 0 auto;
         width: 200px;
     }
     

   • 不止一个块级元素
     如果我们有两个或更多块级元素需要在一行中水平居中，最好使它们成为不同的显示类型显示：inline-block;

     .parent
     {
       // Aligning the child of this parent in center
       text-align: center;
     }
     .child
     {
       // set the display of child elements 
       display: inline-block;
       text-align: left;
     }
     

2. 垂直
   • 内联元素
     我们可以轻松地将内联元素居中放置在块级元素中，如下所示：

     // Set the display of the parent class as table
     .parent
     {
       display: table;
       height: 250px;
       background: white;
       width: 240px;
       margin: 20px;
     }
      
     // Set the display of the child class as table-cell
     .child
     {
       display: table-cell;
       margin: 0;
       background: black;
       color: white;
       padding: 20px;
       border: 10px solid white;
       vertical-align: middle;
     }
     

   • 已知高度的块级元素
     我们可以轻松地将内联元素居中放置在块级元素中，如下所示：

     // Set the position of the parent as relaive to other          
     .parent 
     {
       position: relative;
     }
      
     // Set position of the child as absolute in its parent class
     // so that it can be placed anywhere in the parent class
     .child 
     {
       position: absolute;
       top: 50%;
       height: 100px;
      
       /* responsible for padding and border 
       if not using box-sizing: border-box; */
       margin-top: -50px; 
     }
     

     未知高度的块级元素
     我们可以轻松地将内联元素居中放置在块级元素中，如下所示：

     // Set position of child as absolute in its parent class           
     .parent 
     {
       position: relative;
     }
      
     // Set top of the child 50% of viewport
     // Translat the child by 50% of its height about      
     // negative y axis
     .child 
     {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
     }
     

3. 水平和垂直
   • 具有固定高度和宽度的元素
     使用等于该宽度和高度一半的负边距，在您将其绝对定位在 50% / 50% 后将使其居中。

     // Set position of parent class as relative
     .parent 
     {
       position: relative;
     }
      
     // Set top and left of an element of
     // known height as 50%
     .child 
     {
       width: 300px;
       height: 100px;
       padding: 20px;
      
       position: absolute;
       top: 50%;
       left: 50%;
      
       margin: -70px 0 0 -170px;
     }
     

   • 未知高度和宽度的元素
     当我们不知道宽度或高度时，我们可以使用 transform 属性和在两个方向上的 50% 负向中心平移：

     // Set position of parent as relative to other
     .parent 
     {
       position: relative;
     }
      
     // Set top and left of an element of 
     // known height as 50%. Translate the
     // element 50% of its height and width  
     // about negative x-axis and negative y-axis
     .child 
     {
       position: absolute;
       top: 50%; // 
       left: 50%;
       transform: translate(-50%, -50%);
     }
     

注意：’.’运算符在 CSS 中用于标识 CSS 类。在上面的例子中，类parent用于设置父元素的样式，而 class child用于子元素。