1. Examples of horizontal and vertical centering
Method 1:
<style> .box { display: flex; display: -webkit-flex; /*Webkit core browser*/ height:500px; justify-content: center;/*Horizontal centered*/ align-items: center;/*center vertically*/ background-color:red; } style><div class="box"> <div class="item"> centereddiv>div>
Method 2:
<style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height< /span>: 250px; < span class="hljs-attribute">background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; < span class="hljs-rule">margin: auto;/*Perfect centering*/ } style><div class="flex-container"> <div class="flex-item">Perfect centering!div>div>
Second, the width of the left div is fixed, and the right side is full of the screen
<div style="display:flex"> <div style="width:100px;background-color: grey;">leftdiv> <div style="flex:1;background-color:yellow;">rightdiv >div>
1. Center horizontally and vertically Example
Method 1:
<style> .box { display: flex; display: -webkit-flex; /*Webkit core browser*/ height:500px; < span class="hljs-rule">justify-content: center;/*Horizontal centered*/ align-items: center;/*center vertically*/ background-color:red; } span> style><< span class="hljs-title">div class="box"> <div class="item"> centereddiv>div< /span>>
Method 2:
<style> .flex-container { display: -webkit-flex< /span>; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 75px ; height: 75px; margin: auto;/*perfectly centered*/ } style><div class="flex-container">< /span> <div class="flex-item">Perfect centering !div>div>
Second, the width of the left div is fixed, and the right side is covered with the screen
<div style="display:flex"> <div style="width:100px;background-color:grey;">left div> <div style="flex:1;background-color:yellow;" >rightdiv>div>