Home >Web Front-end >HTML Tutorial >How to put a div in the middle of another div? I can't explain it verbally, please see the picture for explanation! Happy weekend to everyone! _html/css_WEB-ITnose

How to put a div in the middle of another div? I can't explain it verbally, please see the picture for explanation! Happy weekend to everyone! _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 11:56:001345browse


Just put the "personal profile" in the middle of the box on the right. Don't know how to do it?


That method was told to me by someone else, but it doesn’t work at all!


Reply to discussion (solution)

Commonly used CSS centering methods: http://www.ido321.com/824.html

Thank you! What you gave is quite good, but I still need to read it one by one to understand it. I hope someone can give me a ready-made one?

<div style="width:800px;height:600px;background:red;position:relative;"><div style="width:200px;height:100px;background:#ccc;position:absolute;top:50%;left:50%;margin-left: -100px;margin-top:-50px;"></div></div>

Brother, you misunderstood, it’s my fault, I said it wrong, actually it’s like this

eefbcff61d86b4ffb32963521f310dd8
afd94c5f95b8ef7300e971af8a72961dFrench style East Highland16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

The correct solution is upstairs. You need to make another div to wrap it up, and then the font div is line-height with the outer div. This height should be consistent with the height of the box

< ;div style="width:800px;height:600px;background:red;">
afd94c5f95b8ef7300e971af8a72961dFrench style East Highland16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

The correct solution is to make another div to wrap it up, and then the font div and the outer div have line-height. The height should be the same as The height of the boxes is the same


87529c971cbf56b7d8bb2bd690a61b17
573ef08195660025c7c21659e7b056bcFrench style Eastern Highlands16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68


It means vertically centering the text in the line. Haha, you can't just come across this

Practice Not enough, I just came across it!

Statement:
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