How to use CSS for centering

Preface:

This article is mainly translated "How-to-center-anything-with-css" the main content of this article, coupled with some of their own general understanding; The main problem is to solve the problem of vertical centering. We know that there are many ways to achieve horizontal centering, such as:

Text-align:center;

margin:0 Auto;

And so on can achieve the most basic level of the center, but for the vertical center is not very familiar with, we first look at the translation of what is said, incidentally interspersed with some other summary of the centering method.

Recently, we explored the core concepts behind CSS layouts and explored the differences between absolute and relative positioning. We will use another CSS layout conversation, this time based on a fundamental problem, almost every new developer asks: How do you achieve centering?

There are a bunch of different types of web elements and layouts, each of which requires a unique solution for centering (vertical and horizontal). Today, we will discuss a series of these scenarios so that you can focus on how they work, with full confidence to achieve all the centering problems!

What is this for?

I recently got a lot of feedback from designers who struggled with the basic methods and concepts of CSS layout. There is a general consensus among many designers of new CSS that they just fiddle with the code until everything fits their desired effect.

I've been through this period myself, and I know it's a very frustrating period in your professional upbringing. Knowing the answer is right in front of you, not being able to figure out is annoying and time consuming.

If this sounds familiar, hopefully I can help relieve you of some solid and practical advice on how to handle some common layout scenarios during this period. If you are a skilled CSS or even close your eyes can be written to fit the CSS code of the master, then this article may not be suitable for you. If you are a designer and just want to better understand how to put something in your Photoshop file and turn it into CSS, then this article is perfect for you. Let's get started.

Centers an element horizontally

The first scenario is the most common one:

Places elements horizontally in a viewport or in a browser window. To get started, let's break a simple div and give it some basic styling.

　　　　　　　　

Programme I

What we need to do is take advantage of the "auto" value that can be applied to the margin.

Disadvantages:

Something that must be remembered in the mind

First, you must declare a specific width for the element you are centering. The height declaration is not required, and you can allow the content to determine the height as needed, which is the default setting, but the width must always be set .

It is important to note that although this technique will work for most block-level elements, not just Div, it will not help you to achieve vertical centering.

Programme II

Centers an absolutely positioned element

The above method can automatically centralize one project in another project, but the method assumes that you use the default positioning context: static. If absolute positioning is applied, this method exits the window.

Using the absolute and relative positioning method we learned last week, we can apply a simple formula to solve this problem.

　　　　

1 . Container {2 height:300px;3 width:300px;4 background: #eee;5 margin:10px Auto;6 position:relative;7 }8 9 . Box {Ten height:100px; One width:100px; ABackground: #222; - Position:absolute; - left:100px; the}

Using this code, we set the distance between the left side of the box and the edge of the parent container to (300-100)/2=100px, which enables the horizontal centering of the child elements

Disadvantages:

This method is only valid if the parent container has a static width. The width of the parent element and child elements must be declared beforehand, and the response width does not work for streaming layouts

Programme III

Considering the popularity of responsive design, more and more containers have recently become popular routes. This means that we need another way to center the child without relying on the width of the parent node.

To achieve this, we need to use a percentage of the left value. The obvious answer is to use 50%, but that doesn't really work because you're not the width of the placeholder element. To make it work, we need to add half of the width of a negative margin-left child element.

12   3   width:70%4   5   67   8  9 . Box {ten   height:100px; One by one   width:100px;   background: #222;    Position:absolute;   */*centering Method 2*   /margin:0px 0 0-50px;   left:50%; 18}

It is important to note that if our child element has a fluid width, this will also work. We used the same steps as before, and presented something similar to the following:

1 . Container {2 height:300px;3width:70%;4 background: #eee;5 margin:10px Auto;6 position:relative;7 }8 9 . Box {Ten height:100px; Onewidth:70%; ABackground: #222; - Position:absolute; -    the   /*Centering Method 2*/ -margin:0px 0 0-35%;/*half of 70%/* - left:50%; - }

Note: Because the percentage of margin and the percentage of the child element's width are determined by the width of the parent element.

Make an element fully centered

Now that we have a few simple and complex centering methods, it's time to deal with the complete centering of the elements horizontally and vertically.

Fortunately, to solve this problem, we can use the method we just learned, we only need to consider the height. This time, we will also center the parent and child elements vertically and horizontally.

Programme one:

Using the absolute positioning of the horizontal centering method, we can use the top value to achieve vertical centering

. container {  height:300px;  width:300px;  Background: #eee;  Position:absolute;     -150px 0 0-150px;   50%;   50%;}. box {  height:100px;  width:100px;  Background: #222;  Position:absolute;     /* Centering Method 2 */ -50px 0 0-50px;      50%;   50%;}

Scenario Two Leverage Flex Layouts

1. Align-items for vertical centering
2. Justify-content for Horizontal centering

. box{   width:300px;   height:400px;   border:1px solid pink;   Display:flex;   Align-items:center;   Justify-content:center; }

Scenario three using Transform implementation

Instead of using negative margin values, we can use the negative translate () Transforms property, which allows you to declare the width and height of child elements without prior declaration

. container {  position:relative;  height:200px;  width:400px;  Background: #eee;  margin:150px Auto;}. Center {  Position:absolute;  left:50%;  top:50%;  Transform:translate ( -50%, -50%);  width:40%;  height:40%;  background:red;}

Make text centered

For my next tip, I'll teach you some of the centering methods of text. We'll start with a simple H1 element in the container div.

　　　　　　

　　　　　　　　　　　　　　　　　　　

Programme I

Using the Text-align property

1 . Container {  2  height:400px; 3   width:400px; 4   background: #eee; 5   margin:50px Auto; 6 }  7  8H1 {  9   font:40px/1 Helvetica, Sans-serif;  Ten   text-align:center;  One}

Is it easy? But now let's say we're going to center this line of text vertically. If this is a paragraph, we may consider the above method, but since it has only one line, we can use a pretty trick.

All we have to do is set the Line-height property to the height of the container. I used the abbreviated font syntax to complete the following.

. Container {  /*Set line-height to this value*/  width:400px;  Background: #eee;  margin:150px Auto;} H1 {  font:40px/200px Helvetica, Sans-serif;  text-Align:center;}

Disadvantages:

Works only for single-line text

On the question of text, you can also refer to this blog "How CSS Implementation" line horizontally centered, and two lines left to align

　　　　　

How to use CSS for centering