html middle text alignment

Question

Hey guys I am making a directory on my site and want to make the text be in the very middle not center and at not at the top I want it to be in the very middle of the document

<center>
  <button href="#">Download!</button>
</center>

Please add relevant code in the question. No one will dig trough your website looking at the CSS to determine what is wrong — SuperDJ, Sep 01 '18 at 19:20
@Ski read the following http://idownvotedbecau.se/nocode/ http://idownvotedbecau.se/noresearch/ http://idownvotedbecau.se/noattempt/ — SuperDJ, Sep 01 '18 at 19:27
aight thanks im new btw im just trying the easy stuff first such as html I put my code on btw thanks for the tips sirrr — Skilliam, Sep 01 '18 at 19:31
@Ski there isn't any text or explanation of which elements you want to be centered so it's still hard to give an answer. Also notice the code mess that you have has quite a lot of syntax errors. There is also no CSS of what you have already tried — SuperDJ, Sep 01 '18 at 19:36
I want them all in the middle of the document and thanks for that — Skilliam, Sep 01 '18 at 19:37
Unclear question, the center tag is obsolete, there are multiple ways of doing it, many duplicates. — VXp, Sep 01 '18 at 20:23
Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — tenor528, Sep 01 '18 at 21:33

score 0 · Answer 1 · answered Sep 01 '18 at 19:19

0

You could use the following:

.box {
  width: var(--box-size);
  height: var(--box-size);
  line-height: var(--box-size);
  background: red;
  color: white;
  text-align: center;
}

:root {
  --box-size: 100px;
}

<div class="box">
  Center
</div>

Or as suggested with flexbox:

.box {
  width: var(--box-size);
  height: var(--box-size);
  background: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --box-size: 100px;
}

<div class="box">
  Center
</div>

answered Sep 01 '18 at 19:19

SuperDJ

7,488
11
40
74

Looks like it didnt work for me I added the div tags at the start and ended it of all my headers and paragraphs and it just went down word by word on the left – Skilliam Sep 01 '18 at 19:24
If you want a real solution add your code to the question and with CSS of what you have already tried – SuperDJ Sep 01 '18 at 19:25

score 0 · Accepted Answer · answered Sep 01 '18 at 19:38

Give css style to your DOM

.wrapper {
    display: table;
    margin: 0 auto;
}

.box {
  background-color: blue;
  color: white;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="wrapper">
   <div class="box">
       Center
   </div>
</div>

html middle text alignment

2 Answers2