Introduction
When learning small programs, it is very important to master some commonly used front-end methods and logic. Pay attention to summary at ordinary times so that you can use them at your fingertips when needed. Center alignment is too common in page layout, so it is particularly important to be able to effectively achieve the effects of horizontal centering and vertical centering. Being able to achieve it is not the goal. What we pursue is efficiency. Once we encounter similar problems, we can immediately find the corresponding solution. Method. Below I will summarize several commonly used center alignment methods and discuss them with you.
Center horizontally
- If the element is an inline element, set text-align:center to its parent element to center the inline element horizontally.
- If it is a block-level element, just set margin:0 auto for the element .
- If the child element contains the float:left attribute, in order to center the child element horizontally, the width of the parent element can be set to fit-content , and in conjunction with margin , make the following settings:
fit-content is a newly added attribute value for the width attribute in CSS3 , it can be easily implemented horizontally with margin, and currently only supports Chrome and Firefox browsers.
.parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;
}
- Using display:flex layout, it can be applied to containers or inline elements. It is a new solution proposed by W3C that can realize various page layouts simply, completely and responsively.
.parent{
display: flex;
justify-content: center;
}
- Use the new transform attribute in CSS3
.child{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
- Use absolute positioning and negative margin-left
.child{
position:absolute;
width:500px;
left:50%;
margin-left:-50%;
}
- Use absolute positioning, and left:0;right:0;margin:0 auto
.child{
position:absolute;
width:100px;
left:0;
right:0;
margin:0 auto;
}
Center vertically
- If the element is a single line of text, you can set line-height equal to the height of the parent element
.parent {
height:300px;
line-height:300px;
}
- If the element is an inline block-level element, you can use display: inline-block, vertical-align: middle and a pseudo-element to center the content block in the container.
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
- The vertical-align attribute is available, and vertical-align will only take effect when the parent layer is td or th. For other block-level elements, we set the parent element display:table, and the child element display:table-cell;vertical-align:middle;
.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
}
- Use CSS3 to add properties to Flexbox
.parent {
display: flex;
align-items: center;
}
- Use transform
.parent {
position:relative
}
.child{
position:absolute;
top:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
- Set the relative positioning of the parent element (position:relative)
.parent {
position:relative
}
.child{
position:absolute;
height:100px;
top:0;
bottom:0;
margin:auto 0;
}
Summarize
Of course, there are more than just the above methods for center alignment. Here I only list a few common or relatively simple methods to use. When we use these methods, we must pay attention to the problem scenario and prescribe the right medicine to cure the disease. If you still don't achieve the desired results using these methods, using an absolute layout is not a bad idea. The so-called absolute layout actually means that the length and width of the parent element and the child element are hard-coded, and the size of margin and padding is equal to their difference.
Supplement:
How to center the button text horizontally and vertically, here is a practical operation.
<button class="test"><text>我来了</text></button>
- original.
.test {
background-color:red;
width:200rpx;
height:100rpx;
}
2. The default is block-level label, aligned in the center. But the layout we want is definitely not so straightforward. Let's add display:inline-block and see.
.test {
display: inline-block;
background-color:red;
width:200rpx;
height:100rpx;
}
Normal, come again.
.test {
display: inline-block;
background-color:red;
width:100rpx;
height:60rpx;
}
Huh? It's not normal. The font is not reduced. Try changing the font-size. test
{ display: inline-block; background-color: red; width: 100rpx; height: 60rpx; font-size: 20rpx; } What's going on? I was confused when I saw this, and so was I! Add text-align and take a look.
.test {
display: inline-block;
background-color:red;
width:100rpx;
height:60rpx;
font-size: 25rpx;
text-align: center;
}
Useless! Add a line-height and take a look. . .
.test {
display: inline-block;
background-color:red;
width:100rpx;
height:60rpx;
font-size: 25rpx;
text-align: center;
line-height: 60rpx;
}
Still no use? Add a padding and take a look
.test {
display: inline-block;
background-color:red;
width:100rpx;
height:60rpx;
font-size: 25rpx;
padding: 0;
}
Damn it! Okay, what's going on? . . .
Summary: From the above, we can know that buttons are aligned in the center by default, but if the text length exceeds the threshold, the centering effect will fail. At this time, we can reset the padding value to achieve the goal.
Reference:
https://www.w3cschool.cn/cssref/
https://juejin.im/post/6844903474879004680