How CSS center?-CodePudding

Is a div centered on the HTML page,

CodePudding user response:

Locate the position: fixed; Margin: auto; left:0; Top: 0; right:0; Bottom: 0;

CodePudding user response:

https://blog.csdn.net/mrwangweijin/article/details/79760884? Utm_medium=distribute. Pc_relevant_bbs_down. None - task - blog - baidujs - 2. Nonecase& Depth_1 - utm_source=distribute. Pc_relevant_bbs_down. None - task - blog - baidujs - 2. Nonecase

CodePudding user response:

CodePudding user response:

text-align: center; The internal text center * * let div/
background-color: #fff;
Border - the radius: 20 px;
Width: 300 px;
Height: 350 px;
Margin: auto;
position: absolute;
top: 0;
left: 0;
Right: 0;
bottom: 0;

CodePudding user response:

Let me a face of meng, this problem is this???
* {
Margin: auto;
Padding: auto;
}

CodePudding user response:

text-align: center;

CodePudding user response:

Find the id or class, div block used in the CSS properties position: relative position, reoccupy left or right, top or bottom attribute to adjust position,

CodePudding user response:

Centered text: text - align: center; Height: 100 px; The line - height: 100 px;

Known wide high: such as width: 20 px; Height: 20 px

The parent position: relative content position: absolute; left: 50%; top: 50%; Margin - left: - 10 px; Margin - top: - 10 px;

I don't know wide high:

The parent position: relative content position: absolute; left: 50%; top: 50%; The transform: translate (50%, 50%)

The parent display: flex; align-items: center; justify-content: center; (CSS 3 properties)

The parent display: table; Children display: table - cell; Vertical - align: middle;

CodePudding user response:

The layout of the flex

CodePudding user response:

https://blog.csdn.net/mrwangweijin/article/details/79760884? Utm_medium=distribute. Pc_relevant_bbs_down. None - task - blog - baidujs - 1. Nonecase& Depth_1 - utm_source=distribute. Pc_relevant_bbs_down. None - task - blog - baidujs - 1. Nonecase
You can refer to this blog, very detailed,,, topic name is 15 kinds of CSS in the way

CodePudding user response:

references a 5 floor to small white response:

let me a face of meng, this problem is this???
* {
Margin: auto;
Padding: auto;
}

Not, I saw on the Internet before a, resources lost,

CodePudding user response:

reference 1/f, front-end leek response:

locate the position: fixed; Margin: auto; left:0; Top: 0; right:0; Bottom: 0;

It is this,

CodePudding user response:

reference Boiled_meat reply: 3/f

& lt; ! PUBLIC DOCTYPE HTML "-////W3C DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" & gt;

<meta charset="utf-8" & gt;
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;

<style>
* {
Padding: 0 px;
margin: 0px;
}
The body and HTML {
Width: 100%;
height: 100%;
Position: relative;
}
Div {
Border: 1 px solid black;
width: 50%;
height: 50%;
Margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; Right: 0;
}
</style>

<body>

It is this,

CodePudding user response:

The font-family: "Avenir", Helvetica, Arial, sans-serif.
- its - the font - smoothing: antialiased;
- moz - osx - the font - smoothing: grayscale.
text-align: center;
Color: # 2 c3e50;
Margin - top: 60 px;

CodePudding user response:

The parent must have wide high
(1)
Body {
Width: 100 vw;
Height: 100 vh;
}
Div {
Postion: absolute;
left: 50%;
top: 50%;
The transform: translate (50%, 50%)
}
(2) the flex layout
Display: flex;
align-items: center;
justify-content: center;
(3)
Wide high (parent subset)/2

CodePudding user response:

nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull