Ggtcf

Some questions about different axiomatic systems for neighbourhoods

Why do remote US companies require working in the US?

Make solar eclipses exceedingly rare, but still have new moons

Why the difference in type-inference over the as-pattern in two similar function definitions?

Why is quantifier elimination desirable for a given theory?

Unclear about dynamic binding

Do I need to write [sic] when a number is less than 10 but isn't written out?

Flying from Cape Town to England and return to another province

What did we know about the Kessel run before the prequels?

I believe this to be a fraud - hired, then asked to cash check and send cash as Bitcoin

Math-accent symbol over parentheses enclosing accented symbol (amsmath)

How to invert MapIndexed on a ragged structure? How to construct a tree from rules?

Help understanding this unsettling image of Titan, Epimetheus, and Saturn's rings?

The exact meaning of 'Mom made me a sandwich'

I want to delete every two lines after 3rd lines in file contain very large number of lines :

Is it ever safe to open a suspicious HTML file (e.g. email attachment)?

Axiom Schema vs Axiom

Why is my new battery behaving weirdly?

Is it my responsibility to learn a new technology in my own time my employer wants to implement?

Is there a way to save my career from absolute disaster?

Why isn't acceleration always zero whenever velocity is zero, such as the moment a ball bounces off a wall?

Why is the US ranked as #45 in Press Freedom ratings, despite its extremely permissive free speech laws?

Is it professional to write unrelated content in an almost-empty email?

How to count occurrences of text in a file?

Auto sizing div [duplicate]

-2

This question already has an answer here:

• 
  Flexbox: center horizontally and vertically
  
  10 answers
  
  


• 
  How to horizontally center a <div>?
  
  95 answers
  
  


• 
  How to vertically center a div for all browsers?
  
  41 answers
  
  

On most of my sites, I put information into a div that has rounded corners with a fox shadow. I was wondering if there is a way to have this parent div automatically center itself vertically & horizontally while changing its height & width based on its children. Below is as close as I have gotten but the div stays to the upper left of my page. It seems to fit the content well but the position is not close to where I'd want it.

.appRoundedShadow 
 display: inline-block;
 justify-content: center;
 align-items: center;
 height: auto;
 width: auto;
 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

I haven't been successful with flexbox.

html css

share|improve this question

edited Mar 8 at 17:00

Kaspar Lee

3,74611746

asked Mar 8 at 15:47

crmckaincrmckain

987

marked as duplicate by Rob, Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 8 at 19:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment | 

-2

This question already has an answer here:

• 
  Flexbox: center horizontally and vertically
  
  10 answers
  
  


• 
  How to horizontally center a <div>?
  
  95 answers
  
  


• 
  How to vertically center a div for all browsers?
  
  41 answers
  
  

On most of my sites, I put information into a div that has rounded corners with a fox shadow. I was wondering if there is a way to have this parent div automatically center itself vertically & horizontally while changing its height & width based on its children. Below is as close as I have gotten but the div stays to the upper left of my page. It seems to fit the content well but the position is not close to where I'd want it.

.appRoundedShadow 
 display: inline-block;
 justify-content: center;
 align-items: center;
 height: auto;
 width: auto;
 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

I haven't been successful with flexbox.

html css

share|improve this question

edited Mar 8 at 17:00

Kaspar Lee

3,74611746

asked Mar 8 at 15:47

crmckaincrmckain

987

marked as duplicate by Rob, Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 8 at 19:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment | 

This question already has an answer here:

• 
  Flexbox: center horizontally and vertically
  
  10 answers
  
  


• 
  How to horizontally center a <div>?
  
  95 answers
  
  


• 
  How to vertically center a div for all browsers?
  
  41 answers
  
  

On most of my sites, I put information into a div that has rounded corners with a fox shadow. I was wondering if there is a way to have this parent div automatically center itself vertically & horizontally while changing its height & width based on its children. Below is as close as I have gotten but the div stays to the upper left of my page. It seems to fit the content well but the position is not close to where I'd want it.

.appRoundedShadow 
 display: inline-block;
 justify-content: center;
 align-items: center;
 height: auto;
 width: auto;
 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

I haven't been successful with flexbox.

html css

share|improve this question

edited Mar 8 at 17:00

Kaspar Lee

3,74611746

asked Mar 8 at 15:47

crmckaincrmckain

987

.appRoundedShadow 
 display: inline-block;
 justify-content: center;
 align-items: center;
 height: auto;
 width: auto;
 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

share|improve this question

edited Mar 8 at 17:00

Kaspar Lee

3,74611746

asked Mar 8 at 15:47

crmckaincrmckain

987

share|improve this question

edited Mar 8 at 17:00

Kaspar Lee

3,74611746

asked Mar 8 at 15:47

crmckaincrmckain

987

edited Mar 8 at 17:00

Kaspar Lee

3,74611746

edited Mar 8 at 17:00

Kaspar Lee

3,74611746

asked Mar 8 at 15:47

crmckaincrmckain

987

asked Mar 8 at 15:47

crmckaincrmckain

987

2 Answers
2

active

oldest

votes

1

flexbox should be the solution for your problem, read more about CSS flexbox here

html,body
 width:100%;
 height:100%;
 margin:0;

.appRoundedShadow 
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;

.container
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

share|improve this answer

answered Mar 8 at 15:59

xTrimyxTrimy

13112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why are you moving a new container tag instead of the stylized tag ? Also, width:100% is the default value
  
  – Arthur
  Mar 8 at 16:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just explaining the idea
  
  – xTrimy
  Mar 8 at 16:08
  

  
  
  
  

add a comment | 

2

Using flex is easy. The think you must not forget is:
The child is vertically centered on the parent height. So you must set a minimum to works or height of parent is equal to child height (and no top/bottom margin are required to center it)

/* Normalize */
html, body 
 padding: 0;
 margin: 0;

html 
 height: 100%; 

body 
 min-height: 100%;
 display: flex;

.appRoundedShadow 
 margin:auto;

 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

<div class="appRoundedShadow"></div>

share|improve this answer

answered Mar 8 at 15:54

ArthurArthur

2,91531838

add a comment | 

1

flexbox should be the solution for your problem, read more about CSS flexbox here

html,body
 width:100%;
 height:100%;
 margin:0;

.appRoundedShadow 
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;

.container
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

share|improve this answer

answered Mar 8 at 15:59

xTrimyxTrimy

13112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why are you moving a new container tag instead of the stylized tag ? Also, width:100% is the default value
  
  – Arthur
  Mar 8 at 16:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just explaining the idea
  
  – xTrimy
  Mar 8 at 16:08
  

  
  
  
  

add a comment | 

1

flexbox should be the solution for your problem, read more about CSS flexbox here

html,body
 width:100%;
 height:100%;
 margin:0;

.appRoundedShadow 
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;

.container
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

share|improve this answer

answered Mar 8 at 15:59

xTrimyxTrimy

13112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why are you moving a new container tag instead of the stylized tag ? Also, width:100% is the default value
  
  – Arthur
  Mar 8 at 16:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just explaining the idea
  
  – xTrimy
  Mar 8 at 16:08
  

  
  
  
  

add a comment | 

flexbox should be the solution for your problem, read more about CSS flexbox here

html,body
 width:100%;
 height:100%;
 margin:0;

.appRoundedShadow 
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;

.container
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

share|improve this answer

answered Mar 8 at 15:59

xTrimyxTrimy

13112

html,body
 width:100%;
 height:100%;
 margin:0;

.appRoundedShadow 
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;

.container
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

html,body
 width:100%;
 height:100%;
 margin:0;

.appRoundedShadow 
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;

.container
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

html,body
 width:100%;
 height:100%;
 margin:0;

.appRoundedShadow 
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;

.container
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

share|improve this answer

answered Mar 8 at 15:59

xTrimyxTrimy

13112

answered Mar 8 at 15:59

xTrimyxTrimy

13112

answered Mar 8 at 15:59

xTrimyxTrimy

13112

2

Using flex is easy. The think you must not forget is:
The child is vertically centered on the parent height. So you must set a minimum to works or height of parent is equal to child height (and no top/bottom margin are required to center it)

/* Normalize */
html, body 
 padding: 0;
 margin: 0;

html 
 height: 100%; 

body 
 min-height: 100%;
 display: flex;

.appRoundedShadow 
 margin:auto;

 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

<div class="appRoundedShadow"></div>

share|improve this answer

answered Mar 8 at 15:54

ArthurArthur

2,91531838

add a comment | 

2

Using flex is easy. The think you must not forget is:
The child is vertically centered on the parent height. So you must set a minimum to works or height of parent is equal to child height (and no top/bottom margin are required to center it)

/* Normalize */
html, body 
 padding: 0;
 margin: 0;

html 
 height: 100%; 

body 
 min-height: 100%;
 display: flex;

.appRoundedShadow 
 margin:auto;

 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

<div class="appRoundedShadow"></div>

share|improve this answer

answered Mar 8 at 15:54

ArthurArthur

2,91531838

add a comment | 

Using flex is easy. The think you must not forget is:
The child is vertically centered on the parent height. So you must set a minimum to works or height of parent is equal to child height (and no top/bottom margin are required to center it)

/* Normalize */
html, body 
 padding: 0;
 margin: 0;

html 
 height: 100%; 

body 
 min-height: 100%;
 display: flex;

.appRoundedShadow 
 margin:auto;

 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

<div class="appRoundedShadow"></div>

share|improve this answer

answered Mar 8 at 15:54

ArthurArthur

2,91531838

/* Normalize */
html, body 
 padding: 0;
 margin: 0;

html 
 height: 100%; 

body 
 min-height: 100%;
 display: flex;

.appRoundedShadow 
 margin:auto;

 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

<div class="appRoundedShadow"></div>

/* Normalize */
html, body 
 padding: 0;
 margin: 0;

html 
 height: 100%; 

body 
 min-height: 100%;
 display: flex;

.appRoundedShadow 
 margin:auto;

 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

<div class="appRoundedShadow"></div>

/* Normalize */
html, body 
 padding: 0;
 margin: 0;

html 
 height: 100%; 

body 
 min-height: 100%;
 display: flex;

.appRoundedShadow 
 margin:auto;

 background-color: white;
 padding: 25px;
 border-radius: 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;

<div class="appRoundedShadow"></div>

share|improve this answer

answered Mar 8 at 15:54

ArthurArthur

2,91531838

answered Mar 8 at 15:54

ArthurArthur

2,91531838

answered Mar 8 at 15:54

ArthurArthur

2,91531838