Trying to Align HTML Button at The Center of The My Page

trying to align html button at the center of the my page

Here's your solution: JsFiddle

Basically, place your button into a div with centred text:

<div class="wrapper">
    <button class="button">Button</button>
</div>

With the following styles:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

There are many ways to skin a cat, and this is just one.

How to align a button to the center of the screen html

You should use something like this:

<div style="text-align:center">  
    <input type="submit" />  
</div>  

Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.

<input type="submit" style="width: 300px; margin: 0 auto;" />

How to center a button within a div?

Updated Answer

Updating because I noticed it's an active answer, however Flexbox would be the correct approach now.

Live Demo

Vertical and horizontal alignment.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Just horizontal (as long as the main flex axis is horizontal which is default)

#wrapper {
  display: flex;
  justify-content: center;
}

Original Answer using a fixed width and no flexbox

If the original poster wants vertical and center alignment its quite easy for fixed width and height of the button, try the following

Live Demo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

for just horizontal alignment use either

button{
    margin: 0 auto;
}

or

div{
    text-align:center;
}

How do I align button to the middle of the screen?

Using text-align: center to horizontally center nested elements

You can achieve this by declaring text-align: center on the containing parent element (.wrapper) and declaring display: inline-block on nested children elements.

position: absolute must be removed since we want to keep elements in the natural document flow - in order for this method to work, elements must be either static or positioned relative.

Note: for horizontal alignment, using text-align: center to work as expected, a few requirements should be met:

1. The containing parent element must be a block element (e.g:
   display: block)
2. The nested elements you need centered should be inline-block
   elements (e.g: display: inline-block)
3. No float rules should be declared on the nested elements you are
   intending to horizontally align, float rules will negate any effort
   to align elements in this way

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
}

.button1.with-margin {
  margin: auto 10px; /* for additional spacing between inline elements*/
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>
<br>
<div class="wrapper">
  <button class="button button1 with-margin">button</button>
  <button class="button button1 with-margin">button2</button>
</div>

HTML, CSS - Aligning Buttons To The Center Of Page

If flexbox is an option, you can add this:

body {
  margin: 0;
  height: 100vh; // stretch body to the whole page
  display: flex; // define a flex container
  flex-direction: column; // arrange items in column
  justify-content: center; // align vertically center
}

(Note that position: middle is invalid)

See demo below:

body {  margin: 0;  height: 100vh;  display: flex;  flex-direction: column;  justify-content: center;}
button {  background-color: #6495ED;  color: white;  padding: 16px 25px;  margin: 0 auto;  border: none;  cursor: pointer;  width: 100%;  border-radius: 8px;}

<button type="button" onclick="document.getElementById('id01').style.display='block'" style="width: auto;">User Login</button><br><br><br><button type="button" onclick="document.getElementById('id02').style.display='block'" style="width:auto; ">Admin Login</button>

Aligning a button to the center

You should use something like this:

<div style="text-align:center">  
    <input type="submit" />  
</div>  

Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.

<input type="submit" style="width: 300px; margin: 0 auto;" />

Align button to center of div

Just add style="text-align:center" in the parent div of the button:

<div class="form-group" style="text-align: center">
  <button type="submit">Send message</button>
</div>

center align button on page

You need to set text-align: center; on the parent element.

#a { float: left; }#c { float: right; }#parent { text-align: center; }

<div id="parent">  <button id="a">A</button>  <button id="b">B</button>  <button id="c">C</button></div>

---

Related Topics