Three ways to vertically center text with variable width and height in divs

I was asked during the interview: How to vertically center a text with variable width and height?

Now let’s summarize:

Write the structure in the body

main">
< div id="login">
djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.

Method 1:

#main{
position: relative; //Use relative positioning in the parent element
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ff0;
padding: 10px;
}
#login{
position: absolute; /*Use absolute positioning in child elements*/
top :50%;                   /*Distance relative to 50% of the height of the parent element*/

left:50%;

background-color: #eee ;
-webkit-transform:translate(-50%,-50%); /*CSS3 style, :translate(-50%,-50%) is relative to -50% of its distance from the x-axis and y-axis */
}

Method 2:

#main{
width: 200px;
height: 200px;
background-color: #eee;
display: table; /*Let the label elements be presented in the form of table*/
}
#login{
display: table-cell; /* Neither ie7 nor ie6 can recognize display: table-cell;*/
vertical-align: middle;
}

The above is the detailed content of Three ways to vertically center text with variable width and height in divs. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

垂直居中 div

source：php.cn

Previous article：Detailed explanation of the conversion method between block elements and inline elements Next article：Detailed introduction to frequently asked questions about CSS multi-browsing

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• Examples of html settings for bold, italic, underline, strikethrough and other font effects
  1970-01-01 08:00:00
• Implement a Java version of Redis
  1970-01-01 08:00:00
• The simplest WeChat applet Demo
  1970-01-01 08:00:00
• Introduction to simple operation methods of pandas.DataFrame (create, index, add and delete) in python
  1970-01-01 08:00:00
• WeChat Mini Program: Example of how to implement tabs effect
  1970-01-01 08:00:00
• Python constructs custom methods to beautify dictionary structure output
  1970-01-01 08:00:00
• HTML5: Use Canvas to process Video in real time
  1970-01-01 08:00:00
• Asp.net uses SignalR to send pictures
  1970-01-01 08:00:00
• WeChat Mini Program Development Tutorial-App() and Page() Function Overview
  1970-01-01 08:00:00
• Detailed explanation of how to use python redis
  1970-01-01 08:00:00

Latest Issues

How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...

From 2024-04-06 20:45:26

0

2

386

Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...

From 2024-04-06 20:41:51

0

1

518

Center align DIV with content on both sides So I have 5 items (within the containing DIV). The line-up of items is as follows: Text Im...

From 2024-04-04 23:19:14

0

1

3438

I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...

From 2024-04-04 17:27:27

0

1

417

Vertically rotated table title, centered + bottom aligned, cross-browser I have a table with rotated headers that looks as expected in Chrome, but not in Firefox. ...

From 2024-04-04 16:45:25

0

1

330

Related Topics

More>

• The latest price of eth market
• How to repair win7 system if it is damaged and cannot be booted
• Login token is invalid
• csv to vcf
• seo page description
• How to use DataReader
• What is the command to delete a column in sql
• How to obtain the serial number of a physical hard disk under Windows