CSS Center Layout Summary

Center layout

<div class= "Parent" >

<div class= "Child" >demo</div>

</div>

1. Center Horizontally

1> Scheme one Inlink-block+text-align

. Child {Display:inlink-block;}

. parent {Text-align:center;}

Pros: Good compatibility

Disadvantage: child element width height cannot be set

2> Solution Two Table+margin

. Child {display:table; margin:0 auto;}

Pros: Only need to set child (own)

3> Plan three Absolute+transform

. parent {position:relative;}

. Child {Position:absolute;left:50%;transform:translatex (-50%);}

Pros: Child elements do not have an impact on other elements

Cons: Compatibility issues

4> Solution Four Flex+justify-content

. parent {Display:flex;justify-content:center;}

Pros: Just set the parent node

or set to

. parent {Display:flex;}

. Child {margin:0 Auto;}

Cons: Flex low version IE does not support

2. Center Vertically

1> Scheme one Table-cell+vertical-align

. parent {Display:table-cell;vertical-align:middle;}

Pros: Just set parent node, good compatibility

2> Solution Two Absolute+transform

. parent {position:relative;}

. Child {Position:absolute;top:50%;transform:translatey (-50%);}

Pros: Child elements do not have an impact on other elements

Cons: Compatibility issues

3> Plan three Flex+align-items

. parent {Display:flex;align-items:center;}

Pros: Just set the parent node

Cons: Compatibility issues

3. Center both horizontally and vertically

1> Scheme one Inline-block+text-align+table-cell+vertical-align

. parent {Text-align:center;display:table-cell;vertical-align:middle;}

. Child {Display:inline-block;}

2> Solution Two Absolute+transform

. parent {position:relative;}

. Child {position:absolute;left:50%;top:50%;transform:translate ( -50%,-50%);}

3> Plan three Flex+justify-content+align-items

. parent {Display:flex;justify-content:center;align-items:center;}

This article transferred from: http://www.cnblogs.com/xiaohangzi/p/6090995.html

CSS Center Layout Summary