CSS common layout solutions

Horizontally centered layout

First let’s look at horizontal center

1. The margin + fixed width

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    width: 100px;
    margin: 0 auto;
  }
</style>
Copy the code

Phase must be a front-end have seen, this fixed width horizontal center, we can also use the following to achieve variable width

2. table + margin

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>
Copy the code

Display: Table behaves like a block element, but is the width of the content.

• No need to set the parent element style (IE 8 and above supported)
  For COMPATIBILITY with IE 8, set it to
  <table>

3.inline-block + text-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    display: inline-block;
  }
  .parent {
    text-align: center;
  }
</style>
Copy the code

• Good compatibility (even compatible with IE 6 and IE 7)

4. absolute + margin-left

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;  /* width/2 */
  }
  </style>
Copy the code

• The width of the fixed

• Compared to usingtransform, better compatibility

5. absolute + transform

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
Copy the code

• Absolute positioning is removed from the document flow and does not affect the layout of subsequent elements.

• transformIt is a CSS3 attribute and has compatibility problems

6. flex + justify-content

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;
  }
</style>
Copy the code

• You only need to set the parent node properties, not the child elements

• flexCompatibility issues

Vertical center

1.table-cell + vertical-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>
Copy the code

• Good compatibility
  (Internet Explorer 8 or later needs to adjust the page structure to
  table)

2.absolute + transform

The powerful Absolute is also very simple for such small problems

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
Copy the code

• Absolute positioning is removed from the document flow and does not affect the layout of subsequent elements. But if the absolute positioning element is the only element then the parent element also loses height.

• transformIt is a CSS3 attribute and has compatibility problems

This can also be done with margin-top, and the principle is horizontal center

3.flex + align-items

If absolute is strong, Flex just smiles because he is the best…

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>
Copy the code

Horizontal and vertical center

1. absolute + transform

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
Copy the code

• Absolute positioning is removed from the document flow and does not affect the layout of subsequent elements.
• transformIt is a CSS3 attribute and has compatibility problems

2. inline-block + text-align + table-cell + vertical-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>
Copy the code

• Good compatibility

3. flex + justify-content + align-items

<div class="parent">
  <div class="child">Demo</div> </div> <style> .parent { display: flex; justify-content: center; /* align = center */ align-items: center; } </style>Copy the code

• You only need to set the parent node properties, not the child elements

• Egg pain compatibility issues

## A constant width column, and an adaptive column

1.float + margin

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left; width: 100px; }. Right {margin-left: 100px /* margin-left: 100px */} </style>Copy the code

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right; width: 100%; margin-left: -100px; }. Right {margin-left: 100px /* margin-left: 100px */} </style>Copy the code

This method does not have the 3 pixel BUG in IE 6, but.left is not selectable. You need to set.left {position: relative} to raise the level. Note that this method adds unnecessary HTML text structure.

Proud programmers should abandon browsers that are too low. (Web front-end learning exchange group: 328058344 no small talk, not like!)

2.float + overflow

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>
Copy the code

Setting Overflow: Hidden triggers Block Formatting Context in BFC mode. So what is BFC? In layman’s terms, whatever you do inside the BFC is unaffected outside. This method is simple in style but does not support IE 6

3 .table

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right"> <p>right</p> <p>right</p> </div> </div> <style> .parent { display: table; width: 100%; table-layout: fixed; } .left { display: table-cell; width: 100px; } .right { display: table-cell; } </style>Copy the code

The display feature of a table is the cell width of each column and a certain equal table width. Table-layout: Fixed can speed up rendering, also set layout priority. Margin cannot be set in table-cell but padding can be used to set spacing

4. flex

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
Copy the code

• Compatibility problems with earlier browsers
• Performance issues, only suitable for small scale layout

After we learn a column of fixed width, a column of adaptive layout can also be convenient to achieve multiple columns of fixed width, a column of adaptive multiple columns of variable width plus a column of adaptive here we do not explain, we try, can also consolidate the previous learning

Uniform layout

1. float

<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>
<style>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
  }
</style>
Copy the code

• This method is perfectly compatible with IE8 and above

2. flex

<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column"> <p>4</p> </div> </div> <style> .parent { display: flex; } .column { flex: 1; }.column+.column {/* adjacent sibling */ margin-left: 20px; } </style>Copy the code

• Powerful and simple, with compatibility issues

3. table

<div class='parent-fix'>
  <div class="parent">
    <div class="column">
      <p>1</p>
    </div>
    <div class="column">
      <p>2</p>
    </div>
    <div class="column">
      <p>3</p>
    </div>
    <div class="column"> <p>4</p> </div> </div> </div> <style> .parent-fix { margin-left: -20px; } .parent { display: table; width: 100%; /* Table layout: fixed; /* Table layout: fixed; } .column { display: table-cell; padding-left: 20px; } </style>Copy the code

Such as the layout

1.table

Table features the same width for each column, and the same height for each row can be used to solve this requirement

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right"> <p>right</p> <p>right</p> </div> </div> <style> .parent { display: table; width: 100%; table-layout: fixed; } .left { display: table-cell; width: 100px; }. Right {display: table-cell /* width is left width */} </style>Copy the code

2.flex

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
Copy the code

Note that this actually uses align-items: stretch, and flex’s default align-items value is stretch

3. float

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    overflow: hidden;
  }
  .left,
  .right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>
Copy the code

This method is pseudo contour height (only the background shows the height is equal), the left and right real height is not equal. Good compatibility.

At this point, we’ve seen common layout solutions. These are just for reference, but there are many different ways to implement the same layout. We mainly use position, Flex and table

float